FlexboxやGridで複数行がある場合、行全体の交差軸方向の配置を制御するプロパティです。flex-wrapで複数行になった場合や、グリッドで複数行・列がある場合に効果を発揮します。
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch| content-start | align-content: flex-start |
| content-center | align-content: center |
| content-between | align-content: space-between |
.flex-container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: center;
}複数行のFlexアイテムをコンテナの垂直中央に配置
.flex-container {
display: flex;
flex-wrap: wrap;
height: 400px;
align-content: space-between;
}複数行の間に均等な間隔を配置（上下端は余白なし）
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 500px;
align-content: start;
}グリッドの全体を上端に配置
.flex-container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: space-evenly;
}行間と上下端に均等な間隔を配置
align-itemsは各アイテムの配置、align-contentは行全体の配置を制御。flex-wrapやグリッドで複数行がある場合にのみ効果がある。
単一行のFlexboxでは効果がない。flex-wrap: wrapが必要。align-itemsと混同しやすい。
align-items（各行内のアイテム配置）とalign-content（行そのものの配置）の混同はAIの定番です。align-contentは複数行あるときだけ意味を持つため、flexではflex-wrap: wrapが前提になります（単一行では通常効きません）。「折り返したflexの行間を詰めたい」はalign-content: flex-startが答えです。
折り返したflexコンテナで行間が勝手に広がる問題を、align-itemsとalign-contentの違いを説明しながら修正して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。