Как работает Align Content

align-content управляет распределением пространства между рядами в flex-контейнере вдоль поперечной оси (cross-axis). Работает только при flex-wrap: wrap или wrap-reverse и когда есть несколько рядов.

Допустимые значения:

• flex-start – ряды прижаты к началу контейнера
• flex-end – ряды прижаты к концу
• center – ряды центрированы
• space-between – равное расстояние между рядами
• space-around – равное пространство вокруг рядов
• stretch (по умолчанию) – ряды растягиваются, заполняя контейнер

Пример:

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

Важно: Не путать с align-items, которое выравнивает элементы внутри ряда. align-content работает с группами рядов.