Вы здесь

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

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

CSS синтаксис

align-self: auto | stretch | center | flex-start | flex-end | baseline;

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

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

Пример

Устанавливаем выравнивание для одного из флекс-элементов внутри флекс-контейнера


#myBlueDiv {
    -webkit-align-self: center; /* Safari 7.0+ */
     align-self: center;
}