align-items

Описание

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 растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.

Формальный синтаксис

normal | (en-US) stretch | (en-US) <baseline-position> | (en-US) [ (en-US) <overflow-position>? (en-US) <self-position> ] (en-US)где 
<baseline-position> = [ (en-US) first | (en-US) last ] (en-US)? (en-US) baseline
<overflow-position> = unsafe | (en-US) safe
<self-position> = center | (en-US) start | (en-US) end | (en-US) self-start | (en-US) self-end | (en-US) flex-start | (en-US) flex-end

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

Спецификация	Статус	Комментарий
CSS Flexible Box Layout Module Определение 'align-items' в этой спецификации.	Кандидат в рекомендации	Начальное определение

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Настольные
Мобильные

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	21.0-webkit (en-US)	20.0 (20.0)[1]	11.0 [2]	12.10	7.0-webkit (en-US)

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.4	?	20.0 (20.0)[1]	Нет	12.10	7.0-webkit (en-US)

[1] Чтобы активировать поддержку flexbox в Firefox 18 и 19, пользователь должен посетить about:config и изменить значение предпочтения layout.css.flexbox.enabled на true. Многострочный flexbox поддерживается с Firefox 28.

[2] В Internet Explorer 10-11 (но не 12+), если в элементах flex столбца есть align-items: center; установите на них, и если их содержание слишком велико, они будут выходить за границы своего контейнера. Смотрите Flexbug #2 для получения дополнительной информации..

Смотрите также

Использование гибких блоков CSS