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

Свойство align-self определяет выравнивание по умолчанию для конкретного элемента во flex-контейнере.

Значение по умолчанию:	`auto`
Применяется к:	Flex-элементам, в том числе в потоке псевдо-элементов
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства align-self:

.flex-container {
    /* Safari */
    display: -webkit-flex; 
    -webkit-align-items: flex-start;
    /* Standard syntax */
    display: flex;
    align-items: flex-start;
}
.aligned {
    /* Safari */
    -webkit-flex: 1; 
    -webkit-align-self: stretch;
    /* Standard syntax */
    flex: 1; 
    align-self: stretch;
}

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

В следующей таблице описаны значения этого свойства.

Значение	Описание
`auto`	Элемент принимает вычисленное значение свойства родительского элемента `align-items` или растягивается, если у него нет родителя. Это значение установлено по умолчанию.
`baseline`	Элемент расположен на базовой линии flex-контейнера.
`center`	Элемент расположен в центре flex-контейнера.
`flex-start`	Элемент расположен в начале flex-контейнера.
`flex-end`	Элемент расположен в конце flex-контейнера.
`stretch`	Элемент растягивается, чтобы соответствовать flex-контейнеру.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `align-self`.