flex

Это свойство является сокращением следующих свойств CSS:

• flex-grow
• flex-shrink
• flex-basis

/* Keyword value */
flex: none; /* 0 0 auto */

/* One value, unitless number: flex-grow
flex-basis is then equal to 0%. */
flex: 2; /* 2 1 0% */

/* One value, width/height: flex-basis */
flex: auto; /* 1 1 auto */
flex: 10em; /* 1 1 10em */
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px; /* 1 1 30px */

/* Two values: flex-grow | flex-shrink */
flex: 2 2; /* 2 2 0% */

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial; /* 0 1 auto */
flex: revert;
flex: revert-layer;
flex: unset;

Свойство flex может быть задано с одним, двумя или тремя значениями.

• Синтаксис с одним значением: значение должно быть одним из:

  • валидное значение для <flex-grow>: тогда во всех браузерах сокращенное свойство расширяется до flex: <flex-grow> 1 0%. Однако спецификация гласит, что оно должно расширяться до flex: <flex-grow> 1 0.
  • валидное значение для <flex-basis>: тогда сокращенное свойство расширяется до flex: 1 1 <flex-basis>.
  • ключевое слово none или одно из глобальных ключевых слов.

• Синтаксис с двумя значениями:

  • Первое значение должно быть валидным значением для flex-grow.

  • Второе значение должно быть одним из:

    • валидное значение для flex-shrink: тогда во всех браузерах сокращенное свойство расширяется до flex: <flex-grow> <flex-shrink> 0%.
    • валидное значение для flex-basis: тогда сокращенное свойство расширяется до flex: <flex-grow> 1 <flex-basis>.

• Синтаксис с тремя значениями: значения должны быть в следующем порядке:

  1. валидное значение для flex-grow.
  2. валидное значение для flex-shrink.
  3. валидное значение для flex-basis.

<'flex-grow'>

Определяет flex-grow flex-элемента. Отрицательные значения считаются невалидными. По умолчанию 1 (если опущено. Изначальное значение 0).

<'flex-shrink'>

Определяет flex-shrink flex-элемента. Отрицательные значения считаются невалидными. По умолчанию 1 (если опущено. Изначальное значение 1).

<'flex-basis'>

Определяет flex-basis flex-элемента. По умолчанию 0% (если опущено). Начальное значение auto.

none

Элемент масштабируется в соответствии с его свойствами width и height. Он полностью негибкий: он не уменьшается и не увеличивается относительно контейнера flex. Это эквивалентно установке flex: 0 0 auto.

Часто используемые эффекты flexbox можно получить, используя следующие flex значения:

• initial: flex-элемент не увеличивается, но может уменьшаться. Это значение по умолчанию расширяется до flex: 0 1 auto. Элемент масштабируется в соответствии с его свойствами width или height в зависимости от flex-direction. Если доступное пространство отрицательное, элемент уменьшится до своего минимального размера, чтобы поместиться в контейнер, но не будет увеличиваться, чтобы заполнить любое положительное пространство, доступное в контейнере flex.

• auto: flex-элемент может увеличиваться и уменьшаться. Это значение расширяется до flex: 1 1 auto. Элемент масштабируется в соответствии с его свойствами width или height в зависимости от flex-direction, но увеличивается, чтобы заполнить доступное положительное пространство в контейнере flex или уменьшается до своего минимального размера, чтобы поместиться в контейнер в случае отрицательного пространства. flex-элемент полностью гибкий.

• none: flex-элемент ни увеличивается, ни уменьшается. Это значение расширяется до flex: 0 0 auto. Элемент масштабируется в соответствии с его свойствами width или height в зависимости от направления контейнера flex. flex-элемент полностью негибкий.

• flex: <number [1,∞]>: Основной размер flex-элемента будет пропорционален заданному числу. Это значение расширяется до flex: <number> 1 0. Это устанавливает flex-basis в ноль и делает flex-элемент гибким. Элемент будет по крайней мере таким же широким или высоким, как его минимальный размер, при этом доступное положительное пространство контейнера будет пропорционально распределяться в зависимости от коэффициентов роста этого элемента и его элементов flex-потомков. Если все элементы flex используют этот шаблон, все будут масштабироваться пропорционально своим числовым значениям.

  Предупреждение: браузеры используют значение flex-basis 0%, когда flex-basis не указано в значении flex. Это не то же самое, что значение flex-basis 0, что указано в спецификации. Это может повлиять на макет flex в некоторых случаях. См. демонстрацию этого эффекта в примере Flex-basis 0 против 0%.

В большинстве случаев авторам следует устанавливать flex в одно из следующих значений: auto, initial, none, или положительное безразмерное число. Чтобы увидеть эффект этих значений, попробуйте изменить размер контейнеров flex ниже:

По умолчанию flex-элементы не уменьшаются ниже своего размера min-content. Чтобы изменить это, установите для элемента свойства min-width или min-height.

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-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-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 с flex: auto увеличивается, чтобы занять всё свободное пространство в контейнере.

HTML

<div id="flex-container">
  <div id="flex-auto">
    flex: auto (click to remove/add the `flex: initial` box)
  </div>
  <div id="default">flex: initial</div>
</div>

CSS

#flex-container {
  border: 2px dashed gray;
  display: flex;
}

#flex-auto {
  cursor: pointer;
  background-color: wheat;

  flex: auto;
}

#default {
  background-color: lightblue;
}

JavaScript

const flexAutoItem = document.getElementById("flex-auto");
const defaultItem = document.getElementById("default");
flexAutoItem.addEventListener("click", () => {
  defaultItem.style.display =
    defaultItem.style.display === "none" ? "block" : "none";
});

Результат

Контейнер flex содержит два элемента flex:

• Элемент #flex-auto имеет значение flex равное auto. Значение auto расширяется до 1 1 auto, т.е. элементу разрешено расширяться.
• Элемент #default не имеет заданного значения flex, поэтому он использует значение по умолчанию initial. Значение initial расширяется до 0 1 auto, т.е. элементу не разрешено расширяться.

Элемент #default занимает столько места, сколько ему нужно по ширине, но не расширяется, чтобы занять больше места. Всё оставшееся пространство занимает элемент #flex-auto.

При нажатии на элемент #flex-auto мы устанавливаем свойство элемента #default display в значение none, удаляя его из макета. Элемент #flex-auto затем расширяется, чтобы занять всё доступное пространство в контейнере. Нажатие на элемент #flex-auto снова добавляет элемент #default в контейнер.

• Основные понятия flexbox
• Управление соотношениями элементов flex вдоль основной оси
• CSS flexible box layout модуль