CSS flex-grow Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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