align-items

Flexboxの中で、すべての項目を交差軸方向に揃えるプロパティ。高さの違う3つの項目を動かし、位置と伸び方を比べられます。

遊んでみよう

Flexboxの交差軸に沿って配置

123

normal

CSS

.element align-items: normal;

値のパターン

交差軸方向の配置 align-items

align-itemsの構成要素

01cross axis

交差軸に沿って配置

Flexboxではflex-directionが主軸を決め、その主軸と直角に交わる方向が交差軸になります。

02stretch | start | center | end

伸ばすか位置を揃える

自動サイズの項目を交差軸いっぱいに伸ばすほか、先頭・中央・末尾へまとめて配置できます。

03baseline

文字の基準線を揃える

文字サイズや項目の高さが違っても、最初の行の文字が同じ基準線に並ぶよう配置します。

早見表

初期値はnormalで、Flexboxでは通常stretchのように働きます。項目自身に固定の交差軸サイズがあると、stretchでは伸びません。

01normalレイアウト方式に任せる初期値

02stretch交差軸いっぱいに伸ばす自動サイズ

03flex-start交差軸の先頭へ揃えるFlexbox

04center交差軸の中央へ揃える中央配置

05flex-end交差軸の末尾へ揃えるFlexbox

06baseline文字の基準線を揃える文字サイズの違い

07start / end論理方向の端へ揃えるBox Alignment

よくある使い方

アイコンとテキストを中央に揃える

高さの違うアイコンとラベルを持つボタンやナビゲーションを、縦方向の中央へ揃えられます。

.button { display: flex; align-items: center; }

カードの高さを行いっぱいに伸ばす

高さを固定していないGridやFlexboxの項目なら、stretchで利用できる交差軸の空間へ広げられます。

.cards { display: grid; align-items: stretch; }

文字サイズが違う項目を揃える

価格と単位など大きさの異なる文字を並べるとき、baselineで文字の基準線を合わせられます。

.price { display: flex; align-items: baseline; }

ポイント

主軸と交差軸を先に見分けよう。

横並びのFlexboxでは交差軸は縦方向ですが、flex-direction: columnでは横方向へ変わります。主軸方向はjustify-content、交差軸方向はalign-itemsを使います。align-itemsはFlexboxとGridのコンテナーへ指定し、各直接の子要素に対するalign-selfの既定値をまとめて決めます。個別の項目だけ配置を変えるときはalign-selfを使います。このプロパティは子要素へ継承されません。