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
Explorer Edge Chrome Firefox Opera Safari
1112292012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4292012.19?