flex

Описание

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

Начальное значение	как и у каждого из подсвойств этого свойства: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
Применяется к	flex-элементы, в том числе в потоке псевдоэлементов
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: `flex-grow`: как указано `flex-shrink`: как указано `flex-basis`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation type	как и у каждого из подсвойств этого свойства: `flex-grow`: число `flex-shrink`: число `flex-basis`: длина, проценты или calc();

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

Синтаксис

/* 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                                                | (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>

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;
}

Результат

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

Specification
CSS Flexible Box Layout Module Level 1 # flex-property

Поддержка браузерами

BCD tables only load in the browser

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

Using CSS flexible boxes (en-US)