align-contentで複数行レイアウトを制御

align-contentによる複数行の配置

align-contentはコンテナに複数行のアイテムがある場合（flex-wrap: wrapが設定され、アイテムが実際に折り返す場合）のフレックス行間のスペースの配分を制御します。単一行のフレックスコンテナには効果がありません。

CSSコード

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

.item {
  flex: 0 0 30%;
}

仕組み

アイテムが折り返すと、複数のフレックス行が形成されます。align-contentはこれらの行が交差軸に沿ってどのように配置されるかを決定します。交差軸におけるjustify-contentのようなものですが、個々のアイテムではなく行（アイテムのグループ）に対して機能します。

align-contentの値

値	効果
stretch	行がコンテナを埋めるように引き伸ばされる（デフォルト）
flex-start	行が交差軸の先頭に詰められる
flex-end	行が交差軸の末尾に詰められる
center	行が交差軸の中央に配置される
space-between	行間に均等なスペース。端にはスペースなし
space-around	各行の周りに均等なスペース

align-content vs align-items

Flexboxで最も混同されやすいペアの1つです：

• align-items: 個々のアイテムが行内で交差軸に沿ってどのように配置されるかを制御。
• align-content: 行自体が交差軸に沿ってどのように配分されるかを制御。

align-itemsは単一行と複数行の両方のコンテナで機能します。align-contentは複数行がある場合にのみ目に見える効果があります。