align-items

Работает перпендикулярно justify-content, выравнивает флекс-элементы по дополнительной оси.

Время чтения: меньше 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 очень удобно, если вы делаете двухколоночный макет. Раньше приходилось при помощи разных костылей добиваться одинаковой высоты, а теперь достаточно сделать контейнер флексом, и колонки по умолчанию будут одной высоты.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Если флекс-элементы выстроены в несколько колонок, то выравнивание по поперечной оси будет применяться к каждой строке отдельно.