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

Media

Visual

Computed value

As specified

Animatable

Yes

CSS Version

CSS3

JavaScript syntax

object.style.flexGrow

Syntax

flex-grow: <number> 

Values

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

Example

<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>

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

Browser Support

Desktop
11	12	29	20	12.1	9
Tablets / Mobile
4.4	29	20	12.1	9	?