CSS-свойство `flex`

flex — это CSS-сокращённое свойство, которое задаёт, как флекс-элемент будет увеличиваться или уменьшаться, чтобы занять доступное пространство во флекс-контейнере.

Попробуйте

flex: 1;

flex: 2;

flex: 1 30px;

flex: 1 1 100px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change me</div>
  <div>flex: 1</div>
  <div>flex: 1</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

Составляющие свойства

Это свойство является сокращённой записью следующих 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-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 флекс-элемента. Отрицательные значения считаются недопустимыми. Если значение не указано, по умолчанию используется 1. (Начальное значение — 0)

<'flex-shrink'>

Задаёт значение flex-shrink флекс-элемента. Отрицательные значения считаются недопустимыми. Если значение не указано, по умолчанию используется 1. (Начальное значение — 1)

<'flex-basis'>

Задаёт значение flex-basis флекс-элемента. Если значение не указано, по умолчанию используется 0%. Начальное значение — auto.

none

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

Распространённых эффектов флексбокса можно добиться с помощью следующих значений flex:

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

Описание

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

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>

* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}

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

flex = 
  none |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Примеры

Значение flex: auto

В этом примере показано, как флекс-элемент со значением 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

body * {
  padding: 1rem;
  user-select: none;
  box-sizing: border-box;
  font-family: "Consolas", "Arial", sans-serif;
}

#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-auto значение flex равно auto. Значение auto раскрывается в 1 1 auto, то есть элемент может увеличиваться.
• Для элемента #default значение flex не задано, поэтому по умолчанию используется значение initial. Значение initial раскрывается в 0 1 auto, то есть элемент не может увеличиваться.

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

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

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

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

См. также

• Основные понятия флексбокса
• Управление пропорциями флекс-элементов вдоль главной оси
• Модуль макета CSS Flexible Box