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!

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

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

<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

The following table will show you the current browser support for the CSS flex-grow property.

Desktop
Edge Chrome Firefox Opera Safari
12292012.19
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
292012.1924.4

Last updated by CSSPortal on: 1st January 2024