flex-grow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow.

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

Интерактивный пример

Синтаксис

css
/* Значения типа <number>*/
flex-grow: 3;
flex-grow: 0.6;

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

Свойство flex-grow указывается одним числом — значением типа <number>.

Значения

<number>

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

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

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

Пример

HTML

html
<h4>Это — Flex-Grow</h4>
<h5>
  A,B,C и F имеют коэффициент увеличения flex-grow:1, а D и E — flex-grow:2 .
</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

CSS

css
#content {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

Результат

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

Specification
CSS Flexible Box Layout Module Level 1
# flex-grow-property
Начальное значение0
Применяется кflex-элементы, в том числе в потоке псевдоэлементов
Наследуетсянет
Обработка значениякак указано
Animation typeчисло

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

BCD tables only load in the browser

Смотрите также