align-items

Содержание

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

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

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

Синтаксис

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

Значения

ЗначениеПоложениеОписание
flex-startflex-startФлексы выравниваются по верхнему краю контейнера.
centercenterФлексы выравниваются по центральной оси
flex-endflex-endФлексы выравниваются по нижнему краю контейнера.
stretchstretchФлексы растягиваются таким образом, чтобы занять всё вертикальное пространство контейнера.
baselinebaselineФлексы выравниваются по их базовой линии.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>align-items</title>
  <style>
   .flex-container {
    display: flex;
    align-items: stretch; /* Растягиваем по вертикали */
   }
   .flex-item {
    margin-left: 1rem; /* Расстояние между блоками */
    padding: 10px; /* Поля вокруг текста */
    width: 33.333%; /* Ширина блоков */
   }
   .flex-item:first-child { margin-left: 0; }
   .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>

Результат данного примера показан на рис. 1. За счёт использования значения stretch у атрибута align-items блоки получаются одинаковой высоты, несмотря на разное содержимое.

Блоки одинаковой высоты

Рис. 1. Блоки одинаковой высоты

Примечание

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

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

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

Браузеры

Internet ExplorerChromeOperaSafariFirefox
112912.16.128
AndroidFirefox MobileOpera MobileSafari Mobile
4.412.17.1




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

Сервер падал:54 дн. 2:57 назад.

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

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


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru