CSS свойство align-items

Свойство align-items выравнивает флекс-элементы внутри контейнера по высоте (по перпендикулярной оси).

CSS синтаксис

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

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

ЗначениеОписание
stretchЗначение по умолчанию. Флекс-элементы растягиваются, занимая все пространство контейнера по высоте.
centerФлекс-элементы выравниваются по центру контейнера.
flex-startФлекс-элементы выравниваются относительно верхнего края (начала) контейнера.
flex-endФлекс-элементы выравниваются относительно нижнего края (конца) контейнера.
baselineФлекс-элементы выравниваются по базовой линии.

Пример использования

Устанавливаем выравнивание флекс-элементов по центру флекс-контейнера <div>


div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
     display: flex;
    align-items: center;
}