flex-grow

The defaut for any item is 0.

If all items are defined as 1 and one is defined as 2, the bigger element will take the space of two “1” items.

flex-shrink

The defaut for any item is 1.

If all items are defined as 1 and one is defined as 3, the bigger element will shrink 3x the other ones. When less space is available, it will take 3x less space.

flex-basis

If set to auto, it sizes an item according to its width or height, and adds extra space based on the flex-grow property.

If set to 0, it does not add any extra space for the item when calculating the layout.

If you specify a pixel number value, it will use that as the length value (width or height depends if it’s a row or a column item)

flex

This property combines the above 3 properties:

• flex-grow
• flex-shrink
• flex-basis

and provides a shorthand syntax: flex: 0 1 auto

Lessons in this unit: