align-items: выравнивание по поперечной оси

align-items — свойство flex-контейнера, которое выравнивает все flex-элементы вдоль поперечной оси (cross axis) в пределах одной строки.

Зачем нужно

Когда элементы во flex-строке имеют разную высоту, нужно явно задать их вертикальное положение. align-items решает это одной декларацией для всего контейнера — без хаков с line-height или padding. Переопределить выравнивание для отдельного элемента можно через align-self.

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

  • Вертикальное центрирование иконки и текста в кнопке
  • Выравнивание карточек разной высоты в ряду
  • Прижатие подписи к базовой линии текста в навбаре

Значения

.container {
  display: flex;
  align-items: stretch;     /* по умолчанию — элементы растягиваются */
  align-items: flex-start;  /* к началу поперечной оси */
  align-items: flex-end;    /* к концу поперечной оси */
  align-items: center;      /* по центру */
  align-items: baseline;    /* по базовой линии текста */
}

stretch (по умолчанию)

.container {
  display: flex;
  height: 100px;
  align-items: stretch; /* элементы растянутся до 100px, если нет явного height */
}

center — вертикальное центрирование

.navbar {
  display: flex;
  align-items: center; /* иконка и текст выровнены по центру */
  height: 56px;
}

<nav class="navbar">
  <img src="logo.svg" width="24" height="24">
  <span>Заголовок</span>
</nav>

baseline — по базовой линии

.row {
  display: flex;
  align-items: baseline;
}
/* Полезно когда элементы имеют разный font-size */

<div class="row">
  <span style="font-size: 24px">Большой</span>
  <span style="font-size: 14px">маленький</span>
</div>

flex-start и flex-end

.container {
  display: flex;
  height: 200px;
  align-items: flex-start; /* элементы у верха контейнера */
}

.container-bottom {
  display: flex;
  height: 200px;
  align-items: flex-end;   /* элементы у низа контейнера */
}

Влияние flex-direction

При flex-direction: column поперечная ось становится горизонтальной:

.column-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* теперь горизонтальное центрирование */
}

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

  1. align-items без высоты контейнера — если контейнер подстраивается по содержимому, center и flex-end визуально не заметны
  2. Путаница с align-content — align-items выравнивает элементы внутри одной строки; align-content управляет несколькими строками при flex-wrap: wrap
  3. stretch ломает явно заданные height — если у элемента задана height, stretch не перезапишет её

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

Ресурсы