Flexbox reminder
Container properties
Flex-direction
Row (default)
Row-reverse
Column
Column-reverse
1
2
3
4
5
Justify-content
Flex-start (default)
Flex-end
Center
Space-between
Space-around
Space-evenly
1
2
3
4
5
Align-items (need container height)
Stretch (default)
Flex-start
Flex-end
Center
Baseline
1
2
3
4
5
Align-content (need container height)
Stretch (default)
Flex-start
Flex-end
Center
Space-between
Space-around
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Flex-wrap (and width options)
Nowrap (default)
Wrap
Wrap-reverse
Item width (2 - 15rem)
Container width (10 - 90%)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Multi flex: combine all container properties
Flex direction
Row
Row-reverse
Column
Column-reverse
Justify content
Flex-start
Flex-end
Center
Space-between
Space-around
Space-evenly
Align items
Stretch
Flex-start
Flex-end
Center
Baseline
Align content
Stretch
Flex-start
flex-end
Center
Space-between
Space-around
Flex-wrap
Nowrap
Wrap
Wrap-reverse
Item quantity (2 - 20)
Item width (2 - 30rem)
Item height (2 - 30rem)
Container width (10 - 100vw)
Container height (10 - 100vh)
1
2
3
4
5
Content properties
Align-self (for item 3)
Auto (default)
Flex-start
Flex-end
Center
Baseline
Stretch
1
2
3
4
5
Flex-grow (0 by default)
Item 1
Item 2
Item 3
Item 4
Item 5
1
2
3
4
5
Flex-shrink (1 by default)
Item 1
Item 2
Item 3
Item 4
Item 5
1
2
3
4
5
Order (0 by default)
Item 1
Item 2
Item 3
Item 4
Item 5
1
2
3
4
5