Flexbox 8 - Flex Grow

flex-grow specifies how much of the distributed space a child takes up.

1
2
3

8-1. each section has flex-grow : 0; (default behaviour)

1
2
3

8-2. each section has flex-grow : 1; (number doesn't matter if all the same)

1
2
3

8-3. each section has flex-grow : 1; except 2 which is set to flex-grow : 3; so is three times the size of the others (3:1 ratio)