align-content: многострочное выравнивание

align-content выравнивает несколько flex-строк (или Grid-треков) внутри контейнера по поперечной оси и работает только при flex-wrap: wrap (в Flexbox) или в Grid — в отличие от align-items, которое выравнивает элементы внутри одной строки.

Зачем нужно

При flex-wrap: wrap содержимое может образовывать несколько строк. align-items выравнивает элементы относительно своей строки, но не управляет тем, как строки распределяются по высоте контейнера. align-content заполняет этот пробел: прижать строки к верху, распределить равномерно или отцентрировать их.

Где используется

  • Многострочные карточные сетки с фиксированной высотой контейнера
  • Центрирование нескольких строк контента в hero-секции
  • Grid: выравнивание строк внутри явной сетки

Значения

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px; /* нужна явная высота! */

  align-content: flex-start;    /* строки у начала поперечной оси */
  align-content: flex-end;      /* строки у конца */
  align-content: center;        /* строки по центру */
  align-content: space-between; /* первая и последняя у краёв */
  align-content: space-around;  /* равные отступы вокруг строк */
  align-content: space-evenly;  /* все промежутки одинаковы */
  align-content: stretch;       /* строки растягиваются (по умолчанию) */
}

Примеры

Строки по центру контейнера

.hero {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  align-content: center;    /* строки вертикально по центру */
  justify-content: center;  /* элементы горизонтально по центру */
  gap: 16px;
}

<section class="hero">
  <h1>Заголовок</h1>
  <p>Подзаголовок</p>
  <div class="buttons">...</div>
</section>

Карточки с равномерными строками

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  height: 600px;
  align-content: space-between; /* пространство равномерно между строками */
}
.gallery__item {
  flex: 1 1 200px;
}

В Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 500px;
  align-content: start; /* строки Grid прижаты к верху */
  gap: 16px;
}

Разница align-content vs align-items

align-items:   [A] [B] [C]   — выравнивание элементов внутри строки
               [D] [E] [F]

align-content: ↑
               [A] [B] [C]   — выравнивание самих строк
               [D] [E] [F]
               ↓

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-items: center;   /* A, B, C, D, E, F по центру своей строки */
  align-content: center; /* обе строки по центру контейнера */
}

Когда align-content не работает

  • При flex-wrap: nowrap — одна строка, не к чему применять
  • Когда у контейнера нет явной высоты (или height: auto)
  • При display: flex без flex-wrap: wrap

Частые ошибки

  1. align-content вместо align-items при одной строке — align-content не имеет эффекта без переноса; используйте align-items
  2. Нет высоты контейнера — без явной высоты строки заполняют контейнер полностью, свободного пространства нет
  3. space-between при одной строке — строка прижимается к началу поперечной оси, эффект не виден

Связанные темы

Ресурсы