align-content

複数行のFlexboxを、余った空間の中で交差軸方向に配置・分配するプロパティ。行のまとまりが動く位置と、行間への空間の配り方を比べられます。

遊んでみよう

3項目ずつ折り返した2行と交差軸の余白を比較

123456

normal

CSS

.element align-content: normal;

値のパターン

複数行の配置 align-content

align-contentの構成要素

01multiple lines

複数行をまとめて動かす

Flexboxではflex-wrapで生まれた行どうしを扱います。nowrapの1行だけでは効果がありません。

02start | center | end

行をひとまとまりにする

行間を詰めたまま、交差軸の先頭・中央・末尾へ複数行全体を配置します。

03space-* | stretch

余った空間を行へ分配する

行間や外側へ空間を配るか、行の交差軸サイズを伸ばしてコンテナーを満たします。

早見表

初期値はnormalです。Flexboxではstretchと同様に行を広げます。違いを見るには、折り返した複数行と交差軸方向の余白が必要です。

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

02stretch行を交差軸いっぱいに伸ばすFlexbox

03flex-start複数行を交差軸の先頭へまとめる先頭

04center複数行を交差軸の中央へまとめる中央

05flex-end複数行を交差軸の末尾へまとめる末尾

06space-between最初と最後の行を両端へ置く行間は均等

07space-around各行の両側へ空間を配る外側は半分

08space-evenly外側も行間も同じにするすべて均等

よくある使い方

複数行のカードを中央へまとめる

高さのあるカード領域で、折り返した複数行を交差軸の中央へひとまとまりに配置します。

.cards { height: 24rem; display: flex; flex-wrap: wrap; align-content: center; }

最初と最後の行を両端へ置く

交差軸方向の余白を行間へ集め、最初の行を先頭、最後の行を末尾へ配置します。

.board { height: 24rem; display: flex; flex-wrap: wrap; align-content: space-between; }

Grid全体をブロック軸の末尾へ寄せる

固定高さのGridに余白があるとき、グリッドトラック全体をブロック軸の末尾へまとめられます。

.gallery { height: 24rem; display: grid; grid-auto-rows: 6rem; align-content: end; }

ポイント

1行だけ、または余白なしでは変化しない。

Flexboxではflex-wrapがnowrapの単一行にalign-contentを指定しても効果はありません。複数行ができ、コンテナーの交差軸方向に余った空間があると変化が見えます。align-itemsは各行の中で項目を揃え、align-contentは複数行全体を配置・分配します。Gridではグリッドトラック全体をブロック軸方向へ揃えます。このプロパティは子要素へ継承されません。