align-self

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

Краткая информация

Значение по умолчанию auto
НаследуетсяНет
ПрименяетсяК флекс-элементу
АнимируетсяНет

Синтаксис

align-self: auto | flex-start | flex-end | center | baseline | stretch
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

auto
Берёт родительское значение align-items или stretch, если нет родителя.
flex-start
Элемент выравнивается в начале поперечной оси контейнера.
flex-end
Элемент выравнивается в конце поперечной оси контейнера.
center
Элемент выравнивается по центральной линии на поперечной оси.
baseline
Элемент выравнивается по базовой линии текста.
stretch
Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Песочница

1
2
3
.parent {
  display: flex;
 }
.e2 {
  align-self: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>align-items</title> <style> .flex-container { display: flex; align-items: flex-start; height: 160px; /* Высота контейнера */ } .flex-item { margin-left: 1rem; /* Расстояние между блоками */ padding: 10px; /* Поля вокруг текста */ width: 33.333%; /* Ширина блоков */ } .flex-item:first-child { margin-left: 0; } .flex-item:hover { align-self: stretch; /* Растягиваем при наведении */ } .item1 { background: #F0BA7D; } .item2 { background: #CAE2AA; } .item3 { background: #A6C0C9; } </style> </head> <body> <div class="flex-container"> <div class="flex-item item1"> Фенек — лисица, живущая в пустынях Северной Африки. Имеет достаточно миниатюрный размер и своеобразную внешность с большими ушами. </div> <div class="flex-item item2"> Корсак — хищное млекопитающее рода лисиц. </div> <div class="flex-item item3"> Лисица — хищное млекопитающее семейства псовых, наиболее распространённый и самый крупный вид рода лисиц. </div> </div> </body> </html>

Объектная модель

Объект.style.alignSelf

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-self.

Спецификация

СпецификацияСтатус
CSS Flexible Box Layout Module Level 1Возможная рекомендация

Браузеры

11132912.16.1928
4.42812.17.19.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.