Как работает align-items во flex-контейнере?

Flexbox раскладывает элементы вдоль главной оси (main axis), которая задаётся свойством flex-direction. Перпендикулярно ей идёт поперечная ось (cross axis). Свойство align-items применяется к flex-контейнеру и управляет тем, как все его дочерние элементы выравниваются именно по поперечной оси.

Основные значения

• stretch — значение по умолчанию: элементы растягиваются на всю высоту (или ширину) контейнера, если у них не задан явный размер по поперечной оси.
• flex-start — элементы прижимаются к началу поперечной оси.
• flex-end — элементы прижимаются к концу поперечной оси.
• center — элементы центрируются по поперечной оси.
• baseline — элементы выравниваются по базовой линии текста.

Пример

.container {
  display: flex;
  flex-direction: row;      /* главная ось — горизонталь */
  align-items: center;      /* вертикальное центрирование */
  height: 200px;
}

.item {
  width: 80px;
  height: 40px;
}

Здесь все элементы выстроятся в ряд и будут вертикально отцентрированы внутри контейнера высотой 200px. Если поменять flex-direction на column, главная ось станет вертикальной, а поперечная — горизонтальной, и align-items: center начнёт центрировать элементы по горизонтали.

Отличие от align-self и justify-content

justify-content выравнивает элементы по главной оси, а align-items — по поперечной. Если нужно переопределить выравнивание для одного конкретного элемента, используется align-self на самом элементе, который перекрывает значение align-items родителя.

Итог: align-items — базовый инструмент для управления положением flex-элементов по поперечной оси, особенно удобен для вертикального центрирования и выравнивания карточек, кнопок и иконок в строке.