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.

* Some parts of this feature may have varying levels of support.

Описание

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

Начальное значениеnormal
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Подробнее и больше информации читайте в Использование гибких блоков CSS.

Синтаксис

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

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

align-items = 
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center

<baseline-position> =
[ first | last ]? &&
baseline

<overflow-position> =
unsafe |
safe

<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end

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

Specification
CSS Box Alignment Module Level 3
# align-items-property
CSS Flexible Box Layout Module Level 1
# align-items-property

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
align-items
anchor-center
Experimental
Supported in Flex Layout
flex_context.baseline
first baseline
last baseline
safe and unsafe
start and end
Supported in Grid Layout
start and end

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

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