Свойства CSS

Меню

align-items

Поддержка браузерами

11.0+ 20.0+ 21.0+ 12.1+ 9.0+

Описание

CSS свойство align-items указывает, каким образом будут выравниваться flex-элементы по вертикали, внутри flex-контейнера.

Примечание: для выравнивания flex-элементов по горизонтали используйте свойство justify-content.

Значение по умолчанию: stretch
Применяется: к flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.alignItems="center"

Синтаксис

align-items: stretch|center|flex-start|flex-end|baseline;

Значения свойства

Значение Описание
stretch Значение по умолчанию. flex-элементы растягиваются, занимая всю доступную высоту.

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

center flex-элементы располагаются по центру контейнера, имея одинаковые отступы сверху и снизу.

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

flex-start flex-элементы располагаются по верхней границе контейнера.
flex-end flex-элементы располагаются по нижней границе контейнера.
baseline Если у flex-элементов различное положение базовых линий, то они все выровняются в один ряд так, чтобы нижнии границы линий совпали.

Пример

CSS Свойство:
align-items:
Результат:
Красный
Синий
Зеленый div с дополнительным контентом.
CSS Код:
div#main {
display: flex;
align-items: center;
}
Кликните на любое значение свойства, чтобы увидеть результат