flex-grow

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

Свойство flex-grow задается как единственное <number>.

<number>

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

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

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

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

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

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

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

flex-grow = 
  <number [0,∞]>  

В этом примере всего восемь коэффициентов роста распределены среди шести элементов 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="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>

CSS

#content {
  display: flex;
}

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

.small {
  flex-grow: 1;
}

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

Результат

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

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