align-items
Поддержка браузерами
| 11.0+ | 20.0+ | 21.0+ | 12.1+ | 9.0+ |
Описание
CSS свойство align-items указывает, каким образом будут выравниваться flex-элементы по вертикали, внутри flex-контейнера.
Примечание: для выравнивания flex-элементов по горизонтали используйте свойство justify-content.
| Значение по умолчанию: | stretch |
|---|---|
| Применяется: | к flex-контейнерам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.alignItems="center" |
Синтаксис
align-items: stretch|center|flex-start|flex-end|baseline;
Значения свойства
| Значение | Описание |
|---|---|
| stretch | Значение по умолчанию. flex-элементы растягиваются, занимая всю доступную высоту.
Примечание: если у какого-либо элемента или у всех определено свойство max-height, то заданная максимальная высота не изменяется. |
| center | flex-элементы располагаются по центру контейнера, имея одинаковые отступы сверху и снизу.
Примечание: если flex-элементы занимают больше вертикального пространства, чем высота контейнера, то элементы сместятся так, чтобы переполнение было одинаковым сверху и снизу. |
| flex-start | flex-элементы располагаются по верхней границе контейнера. |
| flex-end | flex-элементы располагаются по нижней границе контейнера. |
| baseline | Если у flex-элементов различное положение базовых линий, то они все выровняются в один ряд так, чтобы нижнии границы линий совпали. |
Пример
CSS Свойство:
align-items:
Результат:
Красный
Синий
Зеленый div с дополнительным контентом.
CSS Код:
div#main {
display: flex;
align-items: center;
}
display: flex;
align-items: center;
}