align-self

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

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

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

Синтаксис

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

Значения

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

Песочница

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

Пример

Код примера скопирован в буфер
<!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.

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

Браузеры

11 13 29 12.1 9 28
4.4 28 12.1 9.2
Флексы