CSS3 - Flexbox - Flex-Basis, Flex-Grow, Flex-Shrink
flex-grow sets how flex-items should be resized, when there is more than enough space.
We start with this example:
Here, all the flex-items use just as much space as they need (
flex-grow is assigned to the flex-items and gets a decimal value.
Here we assign
flex-grow:1 to all items but box2, which gets
This results in box2 being twice as large as the other boxes. Flex-grow can have arbitrary values greater or equal to zero:
When we only assign flex-grow to one flex-item, it chews up all the extra space and the other ones stay at
This is because flex-grow is 0 by default.
The resizing behaviour changes when we introduce
flex-basis. This property states how big the flex-items should ideally be.
Setting flex-basis without flex-grow is the same as if we were setting the width (with horizontal main axis).
But if we set flex-grow now, only the extra space that is available when flex-items have their ideal size is up for distribution. In this example the flexbox has a width of 300px and both flex-items have a flex-basis of 100px making them 200px wide (ideally). So the extra space that can be distributed is 100px wide.
Here box1 gets three times more of the extra space (75px) than box2 (25px). So the extra space (100px) is distributed in the ratio 3:1.
flex-shrink only makes sense, when a flex-basis is set.
It then signifies how much space a flex-item should give up (compared to the others), when there is less space than is ideal.
In this example everything is as in the previous ones, but now we don’t have enough space, as the flexbox only is 100px wide (200px would be ideal).
So we lack 100px of space. Setting
flex-shrink:3 on box1 and
flex-shrink:1 on box2 results in box1 giving up 3 times more space (75px) than box2 (25px).
So box1 is 25px wide and box2 is 75px wide.
flex is a shorthand that sets both
flex-shrink to the same value