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

Свойство flex-grow CSS задаёт коэффициент роста flex-элемента, который определяет, какая часть положительного свободного пространства контейнера flex, если оно есть, должна быть выделена основному размеру flex-элемента.

Когда основной размер flex-контейнера больше суммарных основных размеров его flex-элементов, это положительное свободное пространство можно распределить между flex-элементами. При этом рост каждого элемента будет пропорционален его значению коэффициента роста относительно суммы коэффициентов роста всех flex-элементов.

Попробуйте

flex-grow: 1;

flex-grow: 2;

flex-grow: 3;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I grow</div>
  <div>Item Two</div>
  <div>Item Three</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;
}

Синтаксис

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: revert-layer;
flex-grow: unset;

Значения

Это свойство задаётся следующим значением:

<number>

См. <number>. Отрицательные значения недопустимы. По умолчанию — 0, что предотвращает рост flex-элемента.

Описание

Это свойство определяет, какая часть оставшегося пространства в flex-контейнере должна быть выделена элементу (коэффициент роста flex-элемента).

Основным размером является ширина или высота элемента в зависимости от значения flex-direction.

Оставшееся пространство, или положительное свободное пространство, — это размер flex-контейнера за вычетом суммарных размеров всех flex-элементов. Если у всех соседних элементов одинаковый коэффициент роста, каждый из них получит одинаковую долю оставшегося пространства. Обычно задают flex-grow: 1, но установка коэффициента роста всех flex-элементов в 88, 100, 1.2 или любое другое значение больше 0 даст тот же результат: значение представляет собой отношение.

Если значения flex-grow различаются, положительное свободное пространство распределяется в соответствии с отношением, заданным разными коэффициентами роста. Значения коэффициента flex-grow всех соседних flex-элементов складываются. Затем положительное свободное пространство flex-контейнера, если оно есть, делится на эту сумму. Основной размер каждого flex-элемента со значением flex-grow больше 0 увеличивается на частное, умноженное на собственный коэффициент роста элемента.

Например, если в контейнере 700px находятся четыре flex-элемента размером 100px, а коэффициенты flex-grow этих flex-элементов равны соответственно 0, 1, 2 и 3, суммарный основной размер четырёх элементов составляет 400px, то есть остаётся 300px положительного свободного пространства для распределения. Сумма четырёх коэффициентов роста (0 + 1 + 2 + 3 = 6) равна шести. Следовательно, на каждый коэффициент роста приходится 50px ((300px / 6 ). Каждый flex-элемент получает 50px свободного пространства, умноженные на его коэффициент flex-grow, то есть 0, 50px, 100px и 150px соответственно. Итоговые размеры flex-элементов составляют 100px, 150px, 200px и 250px соответственно.

Свойство flex-grow обычно используется вместе с другими сокращёнными свойствами flex: flex-shrink и flex-basis. Рекомендуется использовать сокращённое свойство flex, чтобы задать все значения.

Формальное определение

Формальный синтаксис

flex-grow = 
  <number>

Примеры

Задание коэффициента роста flex-элемента

В этом примере сумма шести коэффициентов роста равна восьми, то есть на каждое значение коэффициента роста приходится 12.5% оставшегося пространства.

HTML

<h1>This is a <code>flex-grow</code> example</h1>
<p>
  A, B, C, and F have <code>flex-grow: 1</code> set. D and E have
  <code>flex-grow: 2</code> set.
</p>
<div id="content">
  <div class="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
  <div class="box4">D</div>
  <div class="box5">E</div>
  <div class="box6">F</div>
</div>

CSS

#content {
  display: flex;
}

div > div {
  border: 3px solid rgb(0 0 0 / 20%);
}

.box1,
.box2,
.box3,
.box6 {
  flex-grow: 1;
}

.box4,
.box5 {
  flex-grow: 2;
  border: 3px solid rgb(0 0 0 / 20%);
}

.box1 {
  background-color: red;
}
.box2 {
  background-color: lightblue;
}
.box3 {
  background-color: yellow;
}
.box4 {
  background-color: brown;
}
.box5 {
  background-color: lightgreen;
}
.box6 {
  background-color: brown;
}

Результат

Когда шесть flex-элементов распределяются вдоль главной оси контейнера, если сумма основного содержимого этих flex-элементов меньше размера главной оси контейнера, дополнительное пространство распределяется между flex-элементами: A, B, C и F получают по 12.5% оставшегося пространства, а D и E получают по 25% дополнительного пространства.

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

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

См. также

• Сокращённое свойство flex
• Основные понятия Flexbox
• Управление соотношениями flex-элементов вдоль главной оси
• Модуль гибкой блочной раскладки CSS
• flex-grow — странная штука. Или нет? на CSS-Tricks (2017)