# align-content

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

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/align-content/

## 構文

```css
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
```

## Tailwindでは

- `content-start` → align-content: flex-start
- `content-center` → align-content: center
- `content-between` → align-content: space-between

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 29+ / Firefox 28+ / Safari 9+ / Edge 12+

## コード例

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

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

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

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

### 例3: グリッドの全体を上端に配置

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

### 例4: 行間と上下端に均等な間隔を配置

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

## TIPS

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

## よくある間違い

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

## AIがよく間違えるポイント

align-items（各行内のアイテム配置）とalign-content（行そのものの配置）の混同はAIの定番です。align-contentは複数行あるときだけ意味を持つため、flexではflex-wrap: wrapが前提になります（単一行では通常効きません）。「折り返したflexの行間を詰めたい」はalign-content: flex-startが答えです。

## AIへの依頼文例

- 折り返したflexコンテナで行間が勝手に広がる問題を、align-itemsとalign-contentの違いを説明しながら修正して

## 関連プロパティ

- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [justify-content](https://www.css-dictionary.com/property/justify-content.md)
- [flex-wrap](https://www.css-dictionary.com/property/flex-wrap.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)