Описание

CSS свойство align-items выравнивает flex-элементы текущей flex-линии таким же образом, как и justify-content, но в перпендикулярном направлении.

Начальное значениеnormal
Применяется квсе элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Подробнее и больше информации читайте в Использование гибких блоков 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 для получения дополнительной информации..

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

Метки документа и участники

Внесли вклад в эту страницу: Akh-rman, Darkonica, IgorPuchkov2003, helsworkflow, andreww2012
Обновлялась последний раз: Akh-rman,