Coded-Aesthetics

CSS3 - Flexbox - Flex-Basis, Flex-Grow, Flex-Shrink

Flexbox is a two-dimensional layout entity. It provides features like reordering of elements without changing the DOM, easy vertical centering and it let's you specify how elements are to be resized in case there is too much space or not enough space.

flex-grow

flex-grow sets how flex-items should be resized, when there is more than enough space.
We start with this example:

See the Pen xgyQBM by Jan Reinsch (@coded-aesthetics) on CodePen.

Here, all the flex-items use just as much space as they need (width:auto). 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 flex-grow:2:

See the Pen dNgQQB by Jan Reinsch (@coded-aesthetics) on CodePen.

This results in box2 being twice as large as the other boxes. Flex-grow can have arbitrary values greater or equal to zero:

See the Pen dNgQxb by Jan Reinsch (@coded-aesthetics) on CodePen.

When we only assign flex-grow to one flex-item, it chews up all the extra space and the other ones stay at width:auto

See the Pen ZLqVEj by Jan Reinsch (@coded-aesthetics) on CodePen.

This is because flex-grow is 0 by default.

flex-basis

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).

See the Pen JEmwdQ by Jan Reinsch (@coded-aesthetics) on CodePen.

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.

See the Pen EZdGyJ by Jan Reinsch (@coded-aesthetics) on CodePen.

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

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.

See the Pen apRPGb by Jan Reinsch (@coded-aesthetics) on CodePen.

flex

The property flex is a shorthand that sets both flex-grow and flex-shrink to the same value