align-content

レイアウト・配置

FlexboxやGridで複数行がある場合、行全体の交差軸方向の配置を制御するプロパティです。flex-wrapで複数行になった場合や、グリッドで複数行・列がある場合に効果を発揮します。

構文

Syntax

コード例

例 1

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: center;
}

実行結果

align-content: center - 複数行全体を垂直中央に配置

Item 1

Item 2

Item 3

Item 4

💡 flex-wrap: wrapで複数行になった全体をコンテナ中央に配置

複数行のFlexアイテムをコンテナの垂直中央に配置

例 2

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: space-between;
}

実行結果

align-content: space-between - 行間に均等な間隔

Item 1

Item 2

Item 3

Item 4

💡 1行目は上端、2行目は下端に配置（行間に最大の間隔）

複数行の間に均等な間隔を配置（上下端は余白なし）

例 3

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 500px;
  align-content: start;
}

実行結果

align-content: start - 複数行を上端に配置

Item 1

Item 2

Item 3

Item 4

Item 5

💡 グリッドでも使用可能。全体を上端に詰めて配置

グリッドの全体を上端に配置

例 4

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: space-evenly;
}

実行結果

align-content: space-evenly - 全体に均等な間隔

Item 1

Item 2

Item 3

Item 4

💡 上下端と行間すべてに均等な間隔を配置

行間と上下端に均等な間隔を配置

💡 TIPS

align-itemsは各アイテムの配置、align-contentは行全体の配置を制御。flex-wrapやグリッドで複数行がある場合にのみ効果がある。

⚠️ よくある間違い

単一行のFlexboxでは効果がない。flex-wrap: wrapが必要。align-itemsと混同しやすい。

ブラウザサポート

IE11+, 全モダンブラウザ

align-content

構文

コード例

例 1

例 2

例 3

例 4

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート