За что отвечает 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, которое выравнивает элементы внутри строки.