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;
}