flex-grow

The default 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 default 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:

0:	Introduction
1:	Align rows or columns
2:	Vertical and horizontal alignment
3:	Wrap
4:	Moving items before / after another one using order
5:	Vertical alignment using align-self
6:	▶︎ Grow or shrink an item if necessary
7:	Create a layout using Flexbox
8:	How to have a flex child not fill entire height