Справочник CSS

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

align-items управляет выравниванием дочерних элементов по поперечной оси контейнера. Во Flexbox направление этой оси зависит от flex-direction, а в Grid свойство работает внутри областей сетки.

Рабочий пример

.toolbar {
  display: flex;
  align-items: center;
  min-height: 64px;
  gap: 12px;
}

Значение stretch растягивает элементы с автоматическим размером, center помещает их в середину, baseline совмещает базовые линии текста. align-self позволяет переопределить правило для одного элемента.

Когда применять

Для вертикального центрирования строки кнопок обычно подходит align-items: center. Перед выбором проверь направление flex-контейнера, иначе поперечная ось окажется не там, где ожидается.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

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

• Путать align-items с justify-content
• Не задавать display flex или grid
• Ожидать растяжения элемента с фиксированной высотой