Flexbox — 主軸と交差軸さえ掴めばいい
CSSで「横に並べたい」「真ん中に置きたい」と思ったとき、昔はfloatやmargin: autoでなんとか格闘していました。Flexboxはそれを一発で解決する並べ方の仕組みです。コツはたった2本の軸 ——主軸(並ぶ方向)と交差軸(それと直角の方向)—— を意識するだけ。
言葉で覚えるより、動かすのが早いです。下の図1で、4つのプロパティをポチポチ切り替えてみてください。5枚のカードが実際に動いて並び直し、その下に「いま効いているCSS」がそのまま表示されます。
たった2本の軸ですべてが決まる
Flexboxの混乱の大半は、主軸と交差軸を取り違えることから来ます。justify-contentは「主軸(=並ぶ方向)」、align-itemsは「交差軸(=それと直角)」を操作します。普段は主軸が横なので「justifyは横、alignは縦」と覚えがちですが、それはflex-directionがrowのときだけ。
図1でflex-directionをcolumnにしてみてください。主軸が縦に倒れ、justify-contentが縦方向の寄せに、align-itemsが横方向の揃えに入れ替わります。つまり「justify=横」ではなく、justify=主軸・align=交差軸。これさえ掴めば、向きが変わっても迷いません。
ちなみに、要素を上下左右の真ん中にピタッと置くあの有名な書き方—— justify-content: center と align-items: center の合わせ技 ——も、図1で両方をcenterにすれば再現できます。主軸でも交差軸でも中央に寄るので、結果として中心に来るわけです。
- 主軸 (main axis)
- アイテムが並んでいく方向。flex-direction で決まる。justify-content はこの軸を操作する。
- 交差軸 (cross axis)
- 主軸と直角の方向。align-items はこの軸でアイテムを揃える。
- justify-content
- 主軸方向に、余ったすき間をどう配るか(端に寄せる / 中央 / 均等に散らす)。
- align-items
- 交差軸方向の揃え方。stretch は交差軸いっぱいに伸ばす既定値。
まとめ
Flexboxは「親にdisplay: flexを付け、主軸と交差軸の2方向で寄せ方を指定する」だけの仕組みです。justify-contentが主軸、align-itemsが交差軸 —— この対応さえ体で覚えれば、横並びも中央寄せも縦積みも、同じ発想で一気に書けるようになります。軸を意識する。それがFlexboxの全部です。