Flex With Flexbox

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

All items have flex grow 0

Item 1
Item 2
Item 3

All items have flex grow 1

Item 1
Item 2
Item 3

Item1 has 0, Item2 has 1,Item3 has 2

The remaining space gets allocated to the items in the ration 0:1:2

Item 1
Item 2
Item 3

Item 1 & 2 has 1, Item 3 has 4

Item 1
Item 2
Item 3