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:
| number | Defines how much should a flex item grow compared to other flex items if enough space is available. It can be a decimal or integer value. The default value is 0, which indicates that the flex item will not grow at all. |
| initial | Sets the flex-grow property to its default value(0). |
| inherit | Inherits the flex-grow property from the parent element. |
General Info
| Default Value | 0 |
| Inherited | No |
| JavaScript Usage | element.style.flexGrow = “2” |
