align-items

Описание

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

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

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

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

[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