flex
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.
Описание
Свойство 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: 30%;
flex: min-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
".
Формальный синтаксис
flex =
none |
[ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
<flex-grow> =
<number [0,∞]>
<flex-shrink> =
<number [0,∞]>
<flex-basis> =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Пример
#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>
Результат
Спецификации
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-property |
Совместимость с браузерами
BCD tables only load in the browser