align-items
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Описание
CSS свойство align-items
выравнивает flex-элементы текущей flex-линии таким же образом, как и justify-content
, но в перпендикулярном направлении.
Начальное значение | normal |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Подробнее и больше информации читайте в Использование гибких блоков CSS.
Синтаксис
/* Align to cross-start */
align-items: flex-start;
/* Align to cross-end */
align-items: flex-end;
/* Центрировать элементы в поперечной оси */
align-items: center;
/* Выровняйте базовые линии предметов */
align-items: baseline;
/* Растянуть предметы, чтобы соответствовать */
align-items: stretch;
/* Глобальные значения */
align-items: inherit;
align-items: initial;
align-items: unset;
Значения
normal
-
Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:
- В абсолютно позиционированных макетах ключевое слово ведёт себя как
start
в заменённых абсолютно позиционированных блоках, и какstretch
во всех других абсолютно позиционированных блоках. - В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как
stretch
. - Для гибких элементов ключевое слово ведёт себя как
stretch
. - Для элементов сетки это ключевое слово ведёт к поведению, аналогичному
stretch
, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя какstart
. - Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.
- В абсолютно позиционированных макетах ключевое слово ведёт себя как
flex-start
-
Край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.
flex-end
-
The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
center
-
Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси. Если поперечный размер элемента больше, чем у гибкого контейнера, он будет одинаково переполнен в обоих направлениях.
baseline
-
All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
stretch
-
Элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.
Формальный синтаксис
Спецификации
Specification |
---|
CSS Box Alignment Module Level 3 # align-items-property |
CSS Flexible Box Layout Module Level 1 # align-items-property |
Совместимость с браузерами
BCD tables only load in the browser