CSS flex-grow Property

Description

The flex-grow property determines how much space a flex can occupy inside a container. Numbers are taken as the value, they set the proportions of each flex. For example, if all elements are set to 1, then they will be of equal size. If some element gets the value 2, then its size will be twice as large as the rest.

Initial value: 0
Applies to: Flex items, including in-flow pseudo-elements
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.flexGrow

Interactive Demo

flex-grow: 1;

flex-grow: 2;

flex-grow: 3;

Item 1

Item 2

Item 3

Syntax

flex-grow: <number>

Values

<number>Integers (1, 2, 3, ...) or fractional numbers (for example: 0.6) are accepted. Negative values are ignored.

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 {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  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

Editor