Flexの中央が思った向きにならない？主軸と交差軸を切り替えてみよう

Flexで中央へ置きたいのに、思っていた方向へ動かない。justify-contentは横、align-itemsは縦、とだけ覚えていると、flex-directionを変えたときに迷うよ。

今回は、三つの小さな箱を同じ領域に並べ、主軸と交差軸を確認する。ブラウザだけで試せる作例を用意した。保存や外部への通信はしないよ。

主軸は、項目を並べる方向

Flexの主軸は、flex-directionで決まる。今回の横書き・左から右の条件では、rowの主軸は横方向、columnなら縦方向だよ。交差軸は、その主軸と交差する方向になる。

.stage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

justify-contentは主軸方向で項目群を配置する指定。align-itemsは交差軸方向の項目の配置に関わる。まず「どの軸へ効くか」を見てから、画面上の向きを対応させよう。

columnへ変えたら、中央に寄せる方向も変わる

作例は幅と高さを持つ領域なので、どちらの方向にも空きがある。rowでjustify-contentをcenterにすると横方向、columnへ変えると縦方向の中央へ寄る。

columnの状態で左右を中央へ寄せるなら、今回見るのはalign-itemsのほう。二つともcenterにした場合は、今回の条件では上下左右の中央に集まるよ。

この対応は、作例の書字方向での説明。書字方向やrow-reverseなどまで含めた、あらゆる画面での左右の規則ではないよ。

作例のスイッチを動かそう

1. rowで「主軸の中央」をオンにし、左右の空きを見る。
2. そのままcolumnへ変え、上下の空きを比べる。
3. 「交差軸の中央」もオンにして、領域の中央に集まるかを見る。
4. 「最初から試す」でrow・両方オフへ戻す。

中央揃えを見るには、項目の外側に配置できる空きが必要。領域が項目ぴったりのサイズなら、指定しても動きが見えにくいんだ。

動かないときに確認すること

親にdisplay:flexが適用されているか、方向が何になっているか、固定サイズや余白の条件が合っているかを見る。折り返した複数の行を配置するalign-contentとは区別しよう。

編集部ではChromiumで方向・二つの中央揃え・リセットを確認し、スマホ幅でも作例の枠内に収まることを確かめた。キーボードの読む順番をCSSだけで変える例ではないよ。

折り返しはflex-wrap、見た目と読む順番はorderの確認も合わせて見ると整理しやすいね。