The flex-grow property is a sub-property of the Flexible Box Layout module.
It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
.element {
flex-grow: 2;
}For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.
Syntax
flex-grow: <number>Demo
The following demo shows how the remaining space is being calculated according to the different values of flex-grow (see on CodePen for better understanding).
All items have a flex-grow value of 1 except the 3rd one which has a flex-grow value of 2. It means when the available space is distributed, the 3rd flex-item will have twice as much space as others.
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | All | 20+ | 22-28 2 29+ | 7-8 2 9+ | 12.1+ |
| iOS | Chrome Android | Firefox Android | Android | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 2 9+ | 22-28 2 29+ | 90+ | 92+ | 12.1+ |
- 1 Uses the non-standard name
-ms-flex-positive - 2 Supported with prefix
-webkit-
Blackberry browser 10+ supports the new syntax.
For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” or this article from DevOpera.
All Safari not supported flex-grow
Just an update:
Safari 6.1+ supports -webkit-flex-grow
http://www.w3schools.com/cssref/css3_pr_flex-grow.asp
Perfectly explained. Clear and to the point. Thanks.
“For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.”
This isn’t correct? It’s my understanding that flex-grow distributes the available white-space, it does not control the final width of the element. The child with flex-grow set to 2, would only be twice as wide if none of the children have any content.
You can see that in the CodePen example; as soon as you start entering more text in one flex-item box, the widths of all the boxes change.
Flex-grow distributes available white-space, not the absolute width, at least in my understanding.
That’s correct! You’ve explained it very clearly.
Well Explained !!!
Hi, Great explanation!!!
I want to create a separator to increase/decrease two flex elements , what is the best way to do that??
This is wrong. Flex-grow does not dictate a proportion of space that an item takes, unless flex-basis is zero. It dictates the size of the proportion of extra space an item uses, if there is extra space after each items width is accounted for. The difference is big.