CSSの便利機能「フレックスボックス」を学ぼう！（flex-direction、justify-content、align-items、flex-wrap、align-content）

フレックスボックスとは？

フレックスボックスとは、Webサイトのレイアウトが簡単にできる便利なCSSの機能です。

フレックスボックスは、親要素＋子要素でセットになります。

親要素に対して、display:flex;を指定すると、子要素が横並びになります。

flex:1;と指定すると、指定した子要素が画面幅いっぱいに拡大されます。

フレックスボックスの向き（主軸と交差軸）を決めるプロパティです。

flex-direction: row は、初期値で左から右です。

flex-direction: row-reverseは、右から左です。

flex-direction: columnは、上から下です。

flex-direction: column-reverseは、下から上です。

フレックスボックス内の揃え方（主軸に沿って）を決めるプロパティです。

justify-content: flex-startは、左揃えです。

justify-content: flex-endは、右揃えです。

justify-content: centerは、中央揃えです。

justify-content: space-betweenは、均等揃えです。

フレックスボックス内の行間位置（交差軸に沿って）を決めるプロパティです。

align-items: flex-startは、上揃えです。

align-items: flex-endは、下揃えです。

align-items: centerは、中央揃えです。

フレックスボックスの折り返し（主軸に沿って）を決めるプロパティです。

flex-wrap: nowrapは、折り返さずコンテナ内に収まるように自動調整されます。

flex-wrap:wrapは、左上から並べて、下へ折り返します。

flex-wrap: wrap-reverseは、左下から並べて、上へ折り返します。

フレックスボックスの折り返しに対する行間位置（交差軸に沿って）を決めるプロパティです。

align-content: flex-startは、上揃えです。

align-content: flex-endは、下揃えです。

align-content: centerは、中央揃えです。

align-content: space-betweenは上下均等揃えです。

flex-directionとflex-wrapの一括指定プロパティです。