skip to main content

align-items

css

Кратко 🔗

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

Пример 🔗

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

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

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

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

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

Как пишется 🔗

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

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

Разница между значениями flex-start и start, flex-end и end лишь в том, что второе значение «уважает» направление чтения выбранного языка.

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

Подсказки 🔗

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

В работе 🔗

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

Автор: Алёна,