flex-grow property

Sets the flex grow factor for the flex item.

This property is read/write.




flex-grow: <number>

Property values

To control how the flex item grows relative to other items in the flex container, use the following.


A positive number that determines the flex grow factor of the flex item. Negative numbers are invalid.

CSS information

Applies Toflex items
Initial Value0


As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.

As of Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge, IE supports "-webkit-flex-grow" as an alias for this property.

The flex grow factor is a multiplier that determines how much a flex item grows relative to the other items in the flex container.

This property can also be specified within the shorthand flex property.


In the following example, there are three flex items inside of the flex container.

<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>

In the CSS snippet, flex-grow is set to different values for each flex item. The flex-grow values 10, 5, and 1 determine how the respective flex item will grow to fill the flex container relative to the other flex items. The image below shows the flex container with the three flex items.

A flex container with three flex items

#flexContainer {
   display: flex;
#item1 {
   width: 50px;
   background: #66CC33;
   flex-grow: 1;
#item2 {
   width: 50px;
   background: #0099FF;
   flex-grow: 5;
#item3 {
   width: 50px;
   background: #66CC33;
   flex-grow: 10;

The following image shows the flex container that has been resized larger than the original size of the flex container. When flex-grow is set to a higher value, like 10 for flex item 3, it will grow to take up more of the flex container relative to the other flex items, like below.

A flex container with flex-grow properties set


See also

Flexible box layout (Windows)