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

Определение и применение

Свойство flex задаётся Flexbox-элементу и объединяет коэффициенты роста, сжатия и исходный размер по главной оси: flex-grow, flex-shrink, flex-basis.

Порядок трёх значений: рост, сжатие, базовый размер. Например, flex: 1 1 160px разрешает элементу расти и сжиматься относительно базы 160px.

Одно число задаёт коэффициент роста. Браузеры разворачивают flex: 1 в 1 1 0%; нулевая процентная база может отличаться от 0px, когда размер контейнера по главной оси не определён.

Минимальные размеры содержимого могут ограничить сжатие. При необходимости разрешить сжатие по горизонтали задайте min-width: 0, а по вертикали — min-height: 0.

Связанные свойства: flex-grow, flex-shrink, flex-basis.

Подробнее об осях и размерах — в учебнике: Flexbox: контейнер и Flexbox: элементы.

В генераторе Flexbox можно настроить контейнер и размеры его элементов и получить готовый CSS.

Попробуйте значения flex

Короткая запись задаёт рост, сжатие и базовый размер оранжевого элемента.

Значение свойстваflex: 0 1 auto;flex: 1 1 0;flex: 2 1 0;flex: 0 0 120px;

flex: 0 1 auto

HTML и CSS примера

HTML

<div class="stage">
  <div class="item">1</div>
  <div class="item demo-target">2</div>
  <div class="item">3</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex: 0 1 auto;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex: 1 1 0;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex: 2 1 0;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex: 0 0 120px;
}

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

Спецификация: CSS flexbox

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.flex
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`flex`	✓29	✓12	✓22	✓12.1	✓9	✓29	✓22	✓12.1	✓9	✓2.0	✓4.4	✓9
`auto`	✓21	✓12	✓22	✓15	✓7	✓25	✓22	✓14	✓7	✓1.5	✓4.4	✓7
`content`	✓94	✓94	✓61	✓80	✓15	✓94	✓61	✓66	✓15	✓17.0	✓94	✓15
`fit-content`	✓94	✓94	✓94	✓80	✓16	✓94	✓94	✓66	✓16	✓17.0	✓94	✓16
`max-content`	✓94	✓94	✓66	✓80	✓16	✓94	✓66	✓66	✓16	✓17.0	✓94	✓16
`min-content`	✓94	✓94	✓66	✓80	✓16	✓94	✓66	✓66	✓16	✓17.0	✓94	✓16
`none`	✓21	✓12	✓22	✓15	✓7	✓25	✓22	✓14	✓7	✓1.5	✓4.4	✓7
`stretch`	✓138	✓138	×	✓122	✓27	✓138	×	✓91	✓27	✓30.0	✓138	✓27
Ещё 6 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS

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

/* Глобальные значения */
flex: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. ? означает необязательную часть. || разрешает одну или обе составляющие в любом порядке. Квадратные скобки группируют варианты; внутри типа задают допустимый диапазон. Типы в угловых скобках обозначают допустимые значения из таблицы или соответствующих составляющих.

JavaScript:

JavaScript

element.style.flex = "0 1 auto";

Начальное значение свойства

flex-grow — 0;
flex-shrink — 1;
flex-basis — auto.

Значения свойства

Значения flex
Значение	Описание
`<flex-grow>`	Неотрицательное число: доля положительного свободного места, добавляемая к исходному размеру. Это не отношение итоговых размеров.
`<flex-shrink>`	Неотрицательное число: коэффициент сжатия при нехватке места. Для распределения потерь он умножается на базовый размер элемента.
`<flex-basis>`	Исходный размер по главной оси: например, `160px`, `30%`, `auto` или `content`.
`auto`	Эквивалент `1 1 auto`: элемент может расти и сжиматься.
`none`	Эквивалент `0 0 auto`: рост и сжатие отключены.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `flex` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Flexible Box Layout — спецификация flex.

Наследуется

Нет.

Анимируемое

Зависит от составляющих: коэффициенты интерполируются как числа, базовый размер — по правилам flex-basis.

Примеры, попробуйте сами

flex: увеличение элементов

Измените коэффициенты или базовый размер в flex. Сравните ширины соседних элементов; последовательность значений — рост, сжатие, базовый размер.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

.container {
    color: white;
}

.container div:nth-of-type(1) {
    background: orange;
}

.container div:nth-of-type(2) {
    background: brown;
}

.container div:nth-of-type(3) {
    background: tan;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Увеличение флекс элементов в CSS(свойство flex)</title>
  </head>
  <body>
    <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    width: 100%;
    height: 100px;
    display: flex;
}

.container div:nth-of-type(1) {
    flex: 1;
}

.container div:nth-of-type(2) {
    flex: 3;
}

.container div:nth-of-type(3) {
    flex: 1;
}

flex: уменьшение элементов

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

.container {
    color: white;
}

.container div:nth-of-type(1) {
    background: orange;
}

.container div:nth-of-type(2) {
    background: brown;
}

.container div:nth-of-type(3) {
    background: tan;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Уменьшение флекс элементов в CSS(свойство flex)</title>
  </head>
  <body>
    <p>Подвигайте блоки за нижний правый край для демонстрации:</p>
    <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    width: 250px;
    height: 100px;
    display: flex;
    overflow: auto;
    resize: horizontal;
}

.container div:nth-of-type(1) {
    flex: 0 1 150px;
}

.container div:nth-of-type(2) {
    flex: 0 3 150px;
}

.container div:nth-of-type(3) {
    flex: 0 1 150px;
}

flex: базовый размер

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

.container {
    color: white;
}

.container div:nth-of-type(1) {
    background: orange;
}

.container div:nth-of-type(2) {
    background: brown;
}

.container div:nth-of-type(3) {
    background: tan;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Размер флекс элементов по умолчанию в CSS(свойство flex)</title>
  </head>
  <body>
    <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    width: 250px;
    height: 100px;
    display: flex;
}

.container div:nth-of-type(1) {
    flex: 0 1 auto;
}

.container div:nth-of-type(2) {
    flex: 0 1 150px;
}

.container div:nth-of-type(3) {
    flex: 0 1 auto;
}

CSS свойство flex

Определение и применение

Попробуйте значения flex

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

Синтаксис

Начальное значение свойства

Значения свойства

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

Наследуется

Анимируемое

Примеры, попробуйте сами

flex: увеличение элементов

flex: уменьшение элементов

flex: базовый размер

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