フレックスボックスの軸

定義

フレックスボックスは、複数の要素を一行または一列に並べて揃えるためのレイアウト方式です。 キモになるのは「主軸（main axis）」と「交差軸（cross axis）」という二つの方向です。 方向を横（row）にすると主軸が横になり、縦（column）に変えると主軸が縦に切り替わります。 justify は主軸に沿って要素を配置し、align は主軸と直角に交わる交差軸を横切って配置します。 この二つの言葉をそれぞれ別の方向に結びつけて覚えることが、フレックスボックス理解のスタート地点です。 最初は二つの軸が混乱しやすいのですが、いま主軸がどちらを向いているか、方向の設定を一つ確認するだけで 残りは自然と見えてきます。サイズをいちいち指定しなくても、子要素が自分たちでスペースを分け合ってくれる点も、 フレックスボックスを便利にしている大きな特徴です。

なぜ重要か

実務で作るレイアウトのかなりの部分は、フレックスボックスで解決できます。 ヘッダーのロゴとメニューを両端に振り分けたり、ボタンの中のアイコンと文字を縦の中央に揃えたり、 複数のカードを同じ高さに並べたり——こうした場面はすべてフレックスボックスの守備範囲です。 二つの軸の考え方を身につけておくと、「なぜ中央揃えにならないんだろう」というよくある状況でも、 どちらの軸をいじればいいかをすぐに判断できます。以前はこうした配置のために複雑な計算や小手先の工夫が必要でしたが、 いまでは方向と揃えのプロパティをいくつか指定するだけで、ほとんどがきれいに片づきます。 方向と揃えを分けて考える習慣は、複雑な画面をずっと落ち着いて扱えるようにしてくれますし、 のちに学ぶグリッドへも自然につながっていきます。

よくある間違い

• 方向を縦に変えているのに、justify で左右を揃えようとしてしまうケースです。縦方向では主軸が縦になるため、 justify は上下を担当し、左右は align の役目になります。方向が変わると二つの言葉の役割もまるごと入れ替わる、 この点を見落とすと、いくら値を変えても要素が動きません。
• すべての配置を margin や空の要素で無理やり合わせようとすることです。justify と align だけでほとんどの配置は済むのに、 それを知らないと不要な要素が増えてコードが複雑になり、あとから間隔を変えるのも難しくなります。
• 一行に収まりきらないのに折り返しを許可せず、要素がはみ出したりつぶれたりするケースです。 画面が狭くなる可能性があるなら、自然に次の行へ送られるよう、あわせて設定しておきましょう。

実務のヒント

• justify と align で迷ったら、「方向を変えると二つの軸の役割もまるごと入れ替わる」という一文だけ覚えておきましょう。 いま主軸が横なのか縦なのかをまず確認すれば、どのプロパティを触ればいいかが自然に決まり、揃えのミスがぐっと減ります。
• 縦横どちらも中央に揃えたいなら、justify と align をそれぞれ center にしましょう。 二つの軸を同時に扱う感覚がつかめると、画面のどこでも完璧な中央揃えを簡単に作れるようになります。
• 要素どうしの間隔は margin ではなく、親の gap で与えましょう。gap は要素と要素の「あいだ」だけに均等な間隔を入れてくれるので、 両端に余計な余白ができず、計算がずっとシンプルになります。要素を足したり消したりしても、間隔がひとりでに整います。

関連概念