align-items¶
Свойство align-items
выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
Синтаксис¶
/* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ align-items: center; /* Pack items around the center */ align-items: start; /* Pack items from the start */ align-items: end; /* Pack items from the end */ align-items: flex-start; /* Pack flex items from the start */ align-items: flex-end; /* Pack flex items from the end */ align-items: self-start; align-items: self-end; align-items: left; /* Pack items from the left */ align-items: right; /* Pack items from the right */ /* Baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: unset;
Значения¶
Значение | Положение | Описание |
---|---|---|
flex-start | ![]() | Флексы выравниваются в начале поперечной оси контейнера. |
center | ![]() | Флексы выравниваются по линии поперечной оси. |
flex-end | ![]() | Флексы выравниваются в конце поперечной оси контейнера. |
stretch | ![]() | Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера. |
baseline | ![]() | Флексы выравниваются по их базовой линии. |
Значение по-умолчанию: stretch
Наследуется: нет
Применяется к флекс-контейнеру
Анимируется: нет
Объектная модель: object.style.alignItems
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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>
Примечание¶
Safari до версии 9 поддерживает свойство -webkit-align-items
.