〇ひかりうみチャレンジ〇

このような画面になるように、CSSを指定していきます。

（１）小さくなってしまったけど、このようなクラス名になっています

（２）class="contents"にdisplay:flex;を指定

（３）とりあえず前回のおさらいのために、mainとsideを1：1に指定。両方flex:1を入力。
　　　比率は整数のみしか使用できない。小数等は入力しないよう注意！

（４）ただ、完成版は、ブラウザを可変させても、mainとsideが動かないことから、適当なpxを指定してみる。
　　　main     width=640px
           side      width=320px

（５）とりあえず縦方向に画面いっぱいにするために、wrapperにもdisplay:flex;を指定する。

（６）コンテンツ、サイドをfooterがコンテンツ目いっぱいにひろがるように、wrapperにmin-height:100vh;とcontentsに指定する。footerが消えた…。

（７）コンテンツとサイドバーを真ん中寄せにするために、contentsにjustify-contents:center;を指定する。結局、margin:0 autoに指定変更したけど、どちらでもいいのかな？

（８）footerが出てこず、答えのCSSを確認。contentsにflex:1;という指定があることを見つける。Flex:1;の理由は、横いっぱいに広げるための指定です。無事footerが表れて、ブラウザを動かすと追従してくるようになった！

※flex:1;の意味を忘れているので、復習必要ある。flex-grow:1;のこと？flex-growは子要素の伸びる比率を指定する。1が伸ばす、0は伸ばさない。