Описание
CSS свойство align-item выравнивает flex-элементы текущей flex-линии таким же образом, как и justify-content, но в перпендикулярном направлении.
| Начальное значение | normal |
|---|---|
| Применяется к | все элементы |
| Наследуется | нет |
| Отображение | визуальный |
| Обработка значения | как указано |
| Animation type | discrete |
| Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Подробнее и больше информации читайте в Using CSS flexible boxes.
Синтаксис
/* Align to cross-start */ align-items: flex-start; /* Align to cross-end */ align-items: flex-end; /* Center items in the cross-axis */ align-items: center; /* Align the items' baselines */ align-items: baseline; /* Stretch the items to fit */ align-items: stretch; /* Global values */ align-items: inherit; align-items: initial; align-items: unset;
Значения
flex-start- The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
flex-end- The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
center- The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
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 items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
-
Формальный синтаксис
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
Спецификации
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout Module Определение 'align-items' в этой спецификации. |
Кандидат в рекомендации | Initial definition |
Совместимость с браузерами
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] To activate flexbox support in Firefox 18 and 19, the user has to visit about:config and change the value of the layout.css.flexbox.enabled preference to true. Multi-line flexbox has been supported since Firefox 28.
[2] In Internet Explorer 10-11 (but not 12+), if column flex items have align-items: center; set on them and their content is too large, they will overflow the bounds of their container. See Flexbug #2 for more info.