Справочник · CSS

align-content: куда деть лишнюю высоту нескольких рядов

Свойство распределяет ряды, когда их несколько и по поперечной оси осталось свободное место.

Как это работает

align-items выравнивает элементы внутри ряда. align-content выравнивает сами ряды в контейнере. Ему нужно свободное место и перенос: во флексе это flex-wrap, в гриде — несколько строк. space-between раздвигает ряды, center собирает их в середине. Если ряд один, казаться может, что свойство ничего не делает.

.tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem;
  min-height: 8rem;
}

Когда использовать

Облако тегов или несколько рядов карточек в высокой области. Один ряд выравнивай через align-items.

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

• Свойство не сработало, потому что элементы не переносятся.
• Его перепутали с align-items и выровняли не ряды, а сами карточки.
• Ряды прилипли к краям, хотя нужен был верх.