webmas.jp

align-content プロパティは、コンテナ内のすべての直接の子要素の交差軸方向の揃え位置を指定します。

プロパティの詳細

値

normal, flex-start, flex-end, center, start, end, self-start, self-end, baseline, first baseline, last baseline, stretch, safe, unsafe

初期値

normal

対象

すべての要素

継承

しない

CSS レベル

CSS 3

値

narmal

現在のレイアウトモードに依存

flex-start

開始位置揃え。ボックスの合計の高さよりコンテナが大きければコンテナの下部に隙間ができます。

flex-end

終了位置揃え。ボックスの合計の高さよりコンテナが大きければコンテナの上部に隙間ができます。

center

中央揃え。ボックスの合計の高さよりコンテナが大きければコンテナの上下に隙間を取りセンタリングされます。

start

開始位置揃え。ボックスの合計の高さよりコンテナが大きければコンテナの下部に隙間ができます。（Edge, Safari, Chrome は グリッドレイアウトでのみ対応）

end

終了位置揃え。ボックスの合計の高さよりコンテナが大きければコンテナの上部に隙間ができます。（Edge, Safari, Chrome は グリッドレイアウトでのみ対応）

self-start

ボックスの開始位置揃え。

self-end

ボックスの終了位置揃え。

baseline, first baseline, last baseline

整列されたボックス内のコンテンツのベースラインが一直線に揃うように配置されます。

stretch

ボックスが拡大し行間のスペースが詰められ、コンテナ内に隙間なく配置されます。

safe

他の配置ワードとともに指定。ボックスがコンテナをはみ出した時、開始位置揃えに変更されたうえでコンテナからはみ出ます。

unsafe

他の配置ワードとともに指定。ボックスがコンテナをはみ出した時、配置を維持したままコンテナからはみ出ます。

W3C の仕様書より図解

デモ

display: flex; の場合