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 | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]где 
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | 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!

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

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

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

[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