align-self
Поддержка браузерами
11.0+ | 20.0+ | 21.0+ | 12.1+ | 9.0+ |
Описание
CSS свойство align-self указывает, каким образом будет выравниваться flex-элемент по вертикали, внутри flex-контейнера. Оно работает аналогично свойству align-items, отличие заключается в том, что align-items применяется ко всем элементам и задаётся для flex-контейнера. А align-self применяет к конкретному элементу.
Примечание: align-self переопределяет выравнивание для данного flex-элемента, заданное свойством align-items.
Значение по умолчанию: | auto |
---|---|
Применяется: | к flex-элементам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.alignSelf="center"; |
Синтаксис
align-self: auto|stretch|center|flex-start|flex-end|baseline;
Значения свойства
Значение | Описание |
---|---|
auto | Значение по умолчанию. Указывает, что значение наследуется от свойства align-items. |
stretch | flex-элемент растягивается, занимая всю доступную высоту.
Примечание: если у элемента определено свойство max-height, то заданная максимальная высота не изменяется. В этом случае элемент занимает заданную ему высоту и располагается по верхней границе контейнера. |
center | flex-элемент располагается по центру контейнера, имея одинаковые отступы сверху и снизу.
Примечание: если flex-элемент занимает больше вертикального пространства, чем высота контейнера, то элемент сместится так, чтобы переполнение было одинаковым сверху и снизу. |
flex-start | flex-элемент располагается по верхней границе контейнера. |
flex-end | flex-элемент располагается по нижней границе контейнера. |
baseline | Элемент позиционируется в соответствие с базовой линией контейнера. |
Пример
align-self: auto;
}