flex
Описание
Свойство CSS flex
- это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
Наследуется | нет |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | как и у каждого из подсвойств этого свойства:
|
Для более полной информации читайте Использование flex-контейнеров CSS.
Синтаксис
/* 0 0 auto */
flex: none;
/* Одно значение, число без единиц: flex-grow */
flex: 2;
/* Одно значение, ширина/высота: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Два значения: flex-grow | flex-basis */
flex: 1 30px;
/* Два значения: flex-grow | flex-shrink */
flex: 2 2;
/* Три значения: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Глобальные значения */
flex: inherit;
flex: initial;
flex: unset;
Значения
<'flex-grow'>
- Определяет
для флекс элемента. Смотриflex-grow
<number>
для большей информации. Негативные значения считаются недействительными. Значение по умолчанию0
, если не указано. <'flex-shrink'>
- Определяет
для флекс элемента. Смотриflex-shrink
<number>
для большей информации. Негативные значения считаются недействительными. Значение по умолчанию1
, если не указано. <'flex-basis'>
- Определяет
для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчаниюflex-basis
0%
, если не указано. none
- Размер элемента устанавливается в соответствии с его свойствами
width
иheight
. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "flex: 0 0 auto
". -
Формальный синтаксис
none | (en-US) [ (en-US) <'flex-grow'> <'flex-shrink'>? (en-US) || (en-US) <'flex-basis'> ] (en-US)
Пример
#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Flexible Box Layout Module Определение 'flex' в этой спецификации. |
Кандидат в рекомендации | Initial definition |
Поддержка браузерами
Особенность | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Базовая поддержка | 18.0 (18.0) (behind a pref) [1] [2] 20.0 (20.0) [2][3] |
21.0-webkit (en-US) 29.0 |
10.0-ms (en-US) [3][4] 11.0 [3][4] |
12.10 | 6.1-webkit (en-US) |
Особенность | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 4.4 | 11 | 12.10 | 7.1-webkit (en-US) |
[1] Для активации flexbox для Firefox 18 и 19 пользователю необходимо внести следующее изменение:
свойство конфигурации "layout.css.flexbox.enabled" вtrue
.
[2] Multi-line flexbox поддерживается Firefox 28.
[3] Internet Explorer 10-11 (кроме 12+) игнорируют использование calc()
во flex-basis части flex
синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В Flexbug # 8.
[4] В Internet Explorer 10-11 (кроме 12+), объявление flex
без единичного значения в его flex-basis части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в flex-basis часть flex
. Дополнительную информацию см. В Flexbug #4.