flex-grow

Summary

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

Начальное значение	`0`
Применяется к	flex-элементы, в том числе в потоке псевдоэлементов
Наследуется	нет
Отображение	визуальный
Обработка значения	как указано
Animation type	число
Канонический порядок	уникальный неоднозначный порядок, определённый формальной грамматикой

See Using CSS flexible boxes for more properties and information.

Syntax

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

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

Values

<number>: See <number>. Negative values are invalid.

Formal syntax

<number>

Example

HTML

<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are 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

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

Result

Specifications

Specification	Status	Comment
CSS Flexible Box Layout Module Определение 'flex-grow' в этой спецификации.	Кандидат в рекомендации	Initial definition

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	18.0 (18.0)^[1]	21.0-webkit	11	12.10	6.1-webkit
< 0 animate	32.0 (32.0)^[2]	49.0	?	Нет	Нет

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	18.0 (18.0)^[1]	?	Нет	12.10	Нет
< 0 animate	32.0 (32.0)^[2]	?	?	Нет	Нет

[1] Firefox supports only single-line flexbox until Firefox 27. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] Before Firefox 32, Gecko wasn't able to animate values starting or stopping at 0(Spec, Demo).