CSS flex-grow Property

CSS flex-grow property specifies how much wider a flex item should grow compared to other flex items if enough space is available.

By default, the flex-grow property is set to 0 for each flex item. This indicates that the flex items will not grow even if enough space is available.

In the example below, we have set the flex-grow property for each flex item individually. Because the flex-grow is a relative property. Therefore, the extra(not used) space is divided among the flex items as follows:

• The first item takes up 1/3 of the extra space
• The second item takes up 2/3 of the extra space
• The third item takes no extra space because the flex-grow is set to 0 for it. It remains in its original size.

Example:

#item1{
  flex-grow: 1;
}
#item2{
  flex-grow: 2;
}
#item3{
  flex-grow: 0;
}

If we set the flex-grow property to the same non-zero value for each flex item, the extra space will be distributed among all the flex items equally. See the example below:

Example:

#item1{
  flex-grow: 1;
}
#item2{
  flex-grow: 1;
}
#item3{
  flex-grow: 1;
}

If the flex-grow property is set to 0(Default value) for each flex item, none of the flex items grow to cover the extra space. i.e each flex item remains in its original size. See the example below:

Example:

#item1{
  flex-grow: 0;
}
#item2{
  flex-grow: 0;
}
#item3{
  flex-grow: 0;
}

CSS Syntax

The flex-grow property has the following syntax:

flex-grow: number|initial|inherit;

Property Values

The flex-grow property accepts the following values:

General Info