Описание

СвойствоCSSflex - этосокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливаетflex-grow,flex-shrink иflex-basis.

Для более полной информации читайтеИспользование 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'>

Определяетflex-basis для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию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()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<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>  <div>Flex box (click to toggle raw box)</div>  <div>Raw box</div></div>

var flex = document.getElementById("flex");var raw = document.getElementById("raw");flex.addEventListener("click", function () {  raw.style.display = raw.style.display == "none" ? "block" : "none";});

#flex-container {  width: 100%;  font-family: Consolas, Arial, sans-serif;}#flex-container > div {  border: 1px solid #f00;  padding: 1rem;}#flex-container > .raw-item {  border: 1px solid #000;}

Результат

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

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

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

• Using CSS flexible boxes