Flexboxのjustify-contentは主軸、align-itemsは交差軸をそろえる

Flexboxで項目を配置するときは、先にflex-directionで主軸の向きを確認します。justify-contentは主軸に沿って項目をそろえ、align-itemsは主軸と直交する交差軸で項目をそろえます。

「横はjustify、縦はalign」と覚えると、flex-direction: columnへ変えたときに反対になります。プロパティ名を画面の上下左右へ直接対応させず、主軸と交差軸へ対応させます。

display:flexの直接の子がflex itemになる

2014年3月25日のCSS Flexible Box Layout Module Level 1は、displayへflexとinline-flexを加えています。display: flexを指定した要素はblock-levelのflex containerを作り、その通常フローにある直接の子がflex itemになります。

.actions {
  display: flex;
}

孫要素まで自動的に同じflex itemになるわけではありません。配置したい項目の親へdisplay: flexを指定し、その直下にどの要素があるかを確認します。

flex-directionが主軸の向きを決める

flex-directionの初期値はrowです。仕様は、次の四つの値を定義しています。

日本語の横書きでrowを使う単純な例では、主軸は左右方向、交差軸は上下方向になります。columnへ変えると、主軸が上下方向、交差軸が左右方向になります。

row-reverseやcolumn-reverseは見た目の順序を反転します。読み上げやキーボード操作の順序まで都合よく直すものとして使わず、HTMLの順序を先に整えます。

justify-contentは主軸の余白を配分する

justify-contentは、flexible lengthとauto marginを計算したあと、主軸に残る余白を使ってflex itemをそろえます。初期値はflex-startです。

項目の幅を足した結果がcontainerの幅と同じなら、配る余白はありません。justify-content: space-betweenを付けても、余白がなければ項目間は広がりません。配置値だけでなく、containerの寸法と各itemの寸法を確認します。

align-itemsは交差軸で全itemの基準をそろえる

align-itemsは、交差軸に沿う配置の初期値を、container内のすべてのflex itemへ与えます。初期値はstretchです。

一つのitemだけ基準を変える場合は、item側のalign-selfで上書きできます。全itemの基準を変えるalign-itemsと、一項目だけを変えるalign-selfを分けます。

rowなら両端配置と上下中央を別々に指定する

次は、二つの操作項目を左右の端へ分け、上下方向では中央へそろえる説明用の例です。80pxは動きを確認するための仮の高さです。

.actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
}

flex-direction: rowなので、justify-content: space-betweenは左右方向の余白を配ります。align-items: centerは、それと直交する上下方向でitemを中央へ置きます。

同じコードでflex-direction: columnへ変えると、justify-contentは上下方向、align-itemsは左右方向へ作用します。縦並びへ変えたあとで位置が逆になったように見える場合は、二つのプロパティを入れ替える前に、主軸の向きを確認してください。

高さ、overflow、個別寸法は別に確認する

中央配置を指定しても、containerとitemの交差寸法が同じなら、移動できる余白はありません。align-items: centerが効かないように見える場合は、containerの使用高さとitemの高さを調べます。

初期値stretchも、itemの交差寸法がautoの場合に働きます。明示した高さやmin-height、max-heightの制約があれば、期待した高さまで伸びないことがあります。内容がitemに収まらなければ、配置とは別にoverflowも確認します。

2014年3月25日の仕様はLast Call Working Draftです。実案件へ使う場合は、対象ブラウザーで接頭辞なしの構文、必要な代替指定、幅と高さ、折り返しを確認します。仕様に値があることと、対象環境で同じ表示になることを分けてください。

最初の一手は、flex containerを一つ選び、flex-direction、主軸、交差軸、主軸の余白、交差寸法を書き出すことです。その後で、justify-contentとalign-itemsを一つずつ指定します。