Flexboxとは
今まではfloatで作っていた横並びを、もっと簡単に作れるようになるぞ。まずは今回作るものを確認してみよう。
display: flex; 横並びにする
display: flexは指定した要素の子要素を横並びにします
指定：親要素に指定する
flex: auto; 画面いっぱいに広げる
flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができます。
親要素の幅に合わせて伸ばしたい要素にflex: autoを指定します
指定：子要素
flex-wrap: wrap 要素を折り返す
flex-wrap: wrapを指定すると、子要素のサイズに応じて折り返すことができます。
flex-direction: column 上下に並べる
flex-direction: columnは子要素を上から下へ並べます。
指定：親要素
