フレックスボックスの基礎

フレックスボックスとは

アイテムを縦方向や横方向に並べて表示するための命令です。

基本的にdivなどのアイテムは縦並びになります。
そこでフレックスボックスを使い、横並びにしてレイアウトを作っていくのがWeb制作の基本になります。

よく使うので使いこなせるようになりましょう！！

display: flex;

” display: flex; “を指定すると、子要素が横並びになります。

justify-content: space-between;

” justify-content: space-between; “とすることで、フレックスボックスの並びを指定することができます。

親要素の幅いっぱい均等に配置する時に使います。

justify-content: space-around;

” justify-content: space-around “も、同じように親要素の幅いっぱい均等に配置されるのですが、両端に余白ができます。

flex-wrap: wrap;

” flex-wrap: wrap; “を、指定すると子要素を折り返して並べることができます。

flex-direction: column;

” flex-direction: column; “を、指定すると子要素を縦並びにすることができます。
スマホ対応にする場合などによく使われるので覚えておきましょう。