レイアウト
align-content
align-content は、フレックスボックスで折り返した行や、グリッドの行をまとめて、交差軸（横に並べたときは縦）のどこに寄せるか、余った空きをどう配るかを指定します。
構文
normal | <baseline-position> | <content-distribution>
| <overflow-position>? <content-position>プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
flex-wrap: wrap;
align-content: center;
}コントロール
align-contentcenter
safe / unsafe項目が箱からはみ出すときだけ効きます（このプレビューでは、はみ出しません）
1234
解説
値の書き方
normal：初期値です。フレックスボックスではstretchと同じです。stretch：行を伸ばして、余った空きを埋めます。align-itemsがstretchなら、項目も行に合わせて伸びます。flex-start・flex-end・center：行をまとめて、始まりの端（上）・終わりの端（下）・真ん中に寄せます。space-between・space-around・space-evenly：余った空きを行の間に配ります。配り方はjustify-contentと同じです。start・end：文字の向きで決まる端に寄せます。flex-wrap: wrap-reverseでも入れ替わりません。baseline・last baseline：表のセルのように横に並んだ箱どうしで、中身のベースラインをそろえるときの値です。このプレビューの 1 つの箱では変わりません。last baselineは Chrome・Edge ではまだ効きません。
このページのプレビューは、補助の宣言で display: flex と flex-wrap: wrap にして、3 つと 1 つの 2 行に折り返しています。
効く条件
- フレックスボックスでは、行が 2 つ以上あるときだけ効きます。
flex-wrap: nowrapの 1 行だけのときは効きません。 - 箱の高さに余りがない（高さが中身ぴったり）ときは、違いが見えません。
display: blockの箱にも効きます（Chrome・Edge 123、Firefox 125、Safari 17.4 以降）。align-content: centerで、ブロックの中身全体を上下の真ん中に置けます。
safe と unsafe
位置のキーワードの前に safe を付けると、行が箱からはみ出すときは start に寄せて、はみ出した分が見えない側（上）に隠れないようにします。unsafe は、はみ出しても指定どおりの位置に置きます。このページのプレビューでは行がはみ出さないので、付けても見た目は変わりません。