Описание
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' в этой спецификации. |
Кандидат в рекомендации | Начальное определение |
Совместимость с браузерами
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 для получения дополнительной информации..