CSS Flexible Box Layoutについてまとめ

はじめに

CSS Flexible Box Layoutの解説をいろいろつまみ読みした。
解説が自分の頭にすっと入りにくい文書だと感じた。
復習に自分なりの表現でまとめてみることにした。

CSS Flexible Box Layoutとは

CSS Flexible Box Layoutは要素の並べ方指定の体系です。
以降、CSS Flexible Box Layoutをフレックスボックスレイアウトと表記する。

前提条件

要素がフレックスボックスレイアウトに従って並べられるには、ブラウザにフレックスボックスレイアウトで並べるように指定しなければならない。
指定方法は、フレックスボックスレイアウトで並べたい親の要素へdisplay: flexを指定する。
この指定により、この指定がされた要素の子にある要素は、フレックスボックスレイアウトで並べられる。

display: flexを指定した親要素のことを、フレックスボックスレイアウトの用語でフレックスコンテナーと呼ぶ。
フレックスコンテナーの直下にある、フレックスボックスレイアウトで並べられる子要素のことを、フレックスボックスレイアウトの用語でフレックスアイテムと呼ぶ。

主軸と交差軸

フレックスボックスレイアウトで子要素を並べるとき、flex-direction: rowなら、子要素は横方向へ並ぶ。 flex-direction: columnなら、子要素は縦方向へ並ぶ。
そのflex-directionで指定される並ぶ向きの軸を、主軸と呼ぶ。
その主軸と直交する向きの軸を交差軸と呼ぶ。
主軸と交差軸は、子要素に寄せや間隔の指定をするときの向きの基礎になる。