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-элементы, в том числе в потоке псевдоэлементов
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
  • flex-grow: как указано
  • flex-shrink: как указано
  • flex-basis: как указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typeкак и у каждого из подсвойств этого свойства:

Для более полной информации читайте Использование flex-контейнеров CSS.

Синтаксис

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()>

<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

Пример

css
#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;
}
html
<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

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