Align Content（align-content）プロパティ

最終更新：2026-09-13

align-content Align Content（align-content）プロパティ

align-content プロパティは、フレックスアイテムの複数行が交叉軸上でどう配置され、どう間隔を空けるかを設定します。効果を発揮するのは、折り返し（flex-wrap: wrap）によって複数行になったときだけです。justify-content と同様に機能しますが、交叉軸上で作用し、行間の空間を分配します。1 行のみの場合は何もしません。その場合は align-items を使ってください。

カテゴリ
初期値	normal
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

align-content: normal | stretch | start | end | flex-start | flex-end | center | space-between | space-around | space-evenly | baseline;

⚙️ 値

値	タイプ	説明
`normal \| stretch \| flex-start \| flex-end \| center \| space-between \| space-around`	キーワード	複数行の交叉軸方向の配置

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
align-content	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

注意： align-content が機能するのは複数行のフレックスレイアウトのみです。アイテムが折り返らない（1 行）場合、このプロパティは効果がありません。その場合は交叉軸方向の配置に align-items を使ってください。

ヒント： align-content と align-items は組み合わせられます。align-content は行同士の間隔を分配し、align-items は各行内のアイテムを交叉軸上で配置します。

❓ よくある質問

Qalign-content と align-items の違いは何ですか？

Aalign-items は 1 行内でアイテムが交叉軸上どう配置されるかを制御します。align-content は行全体（グループ）が交叉軸上でどう分布するかを制御します。1 行の場合 align-content は何もしません。複数行の場合、align-items は各行内のアイテムを管理し、align-content は行間の空間を分配します。両者は異なる層で機能するため、同時に設定できます。

Qalign-content に視覚的な効果が現れないのはなぜですか？

A考えられる原因は以下のとおりです。アイテムが折り返していない（1 行レイアウト）。コンテナに確定した高さがない。flex-wrap がまだ nowrap のまま。align-content が機能するのは、flex-wrap: wrap によって複数行になり、コンテナに交叉軸方向の余った空間があるときだけです。flex-wrap とコンテナの高さを確認して原因を探してください。1 行しかない場合、分配するものは何もありません。どちらのプロパティを使うかを決める簡単な目安は、1 行なら align-items、間隔を空けたい複数の折り返し行なら align-content です。

Q折り返された複数のフレックス行全体を垂直方向に中央揃えするにはどうすればよいですか？

A2 つの層で処理します。コンテナに align-content: center を設定して、行のグループ全体を交叉軸（垂直）方向に中央揃えします。1 行内のアイテムの高さが不揃いな場合は、align-items: center も追加して、各行内のアイテムを垂直中央揃えにします。これが機能するのは、コンテナに確定した高さがあり、flex-wrap: wrap で複数行になっているときだけです。そうでなければ align-content は効果がありません。