align-items¶
Свойство align-items
выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
Flexbox и выравнивание
Руководство по Flexbox
Синтаксис¶
/* 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
.
См. также¶
- Свойство
align-self