1. Flex Direction

row (default) vs column — controls which way the main axis runs

1
2
3
1
2
3

2. Justify Content

controls spacing of items along the main axis

1
2
1
2
1
2
1
2
1
2

3. Align Items

controls positioning along the cross axis (perpendicular to main axis)

1
2
1
2
1
2

4. Flex Wrap

too many items forced onto one line vs allowed to wrap

1
2
3
4
5
6

5. Flex Grow

item 2 has flex-grow:2, so it claims twice the leftover space of items 1 and 3

1
2
3