align-self

Содержание

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

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

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

Синтаксис

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

Значения

flex-start
Элемент выравнивается по верхнему краю контейнера.
flex-end
Элемент выравнивается по нижнему краю контейнера.
center
Элемент выравнивается по центральной оси.
baseline
Элемент выравнивается по базовой линии текста.
stretch
Элемент растягивается таким образом, чтобы занять всё вертикальное пространство контейнера.

Пример

<!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>

Примечание

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

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

СпецификацияСтатус
CSS Flexible Box Layout ModuleРедакторский черновик

Браузеры

Internet ExplorerChromeOperaSafariFirefox
112912.16.128
AndroidFirefox MobileOpera MobileSafari Mobile
4.412.17.1




Рекомендую хостинг: beget.ru

Сервер падал:6 дн. 3:34 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru