align-items

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство для выравнивания элементов внутри контейнера по поперечной оси.

Пример

Секция статьи "Пример"

Мысленно можно провести горизонтальную линию через центр флекс-контейнера и каждого из флекс-элементов. Свойство align-items со значением center совместит центры родителя и каждого из элементов.

        
          
          .container {  display: flex;  align-items: center;}
          .container {
  display: flex;
  align-items: center;
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Работа этого свойства похожа на работу vertical-align для строчно-блочных элементов.

Напомним, что поперечная ось всегда идёт перпендикулярно основной оси. Если флекс-элементы выстроены в ряд, то align-items управляет выравниванием по вертикали.

Как пишется

Секция статьи "Как пишется"

Возможные значения:

Секция статьи "Возможные значения:"
  • stretch (значение по умолчанию) — элементы растягиваются вдоль поперечной оси так, чтобы заполнить всего родителя.
  • flex-start или start — элементы выстраиваются у начала поперечной оси. Разница между ними лишь в том, что второе значение «уважает» направление чтения выбранного языка.
  • flex-end или end — элементы выстраиваются у конца поперечной оси. Разница между первым и вторым значениями аналогична предыдущему пункту.
  • center — элементы выстраиваются по центру поперечной оси.
  • baseline — элементы выравниваются по базовой линии текста. «Базовая линия» — baseline — воображаемая линия, проходящая по нижнему краю знаков шрифта (без учёта выносных элементов).

Это может быть сложно понять сразу, поэтому мы сделали демку. Обратите внимание, что вне зависимости от размера шрифта все блоки выравниваются по базовой линии первой строки.

Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡 Стандартное значение stretch очень удобно, если вы делаете двухколоночный макет. Раньше приходилось при помощи разных костылей добиваться одинаковой высоты, а теперь достаточно сделать контейнер флексом, и колонки по умолчанию будут одной высоты.

На практике

Секция статьи "На практике"