flex-grow

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, чтобы убедиться, что все значения заданы.

Синтаксис

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

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

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

Значения

<number>

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

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

<number>

Пример

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>

#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,.2);
}

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

Результат

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

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

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

• Руководство по CSS Flexbox: Basic Concepts of Flexbox
• Руководство по CSS Flexbox: Controlling Ratios of flex items along the main axis
• `flex-grow` is weird. Or is it? статья Мануэля Матузовича (Manuel Matuzovic) на CSS-Tricks, которая показывает как работает flex-grow