Flex Basics
Default flex, major axis (horizontal)
without flex
A
B
C
display: flex
A
B
C
display: flex, gap
A
B
C
align-item: center
didn't change, parent is flexibleA
B
C
align-item: center, fixed parent height
column wise centerA
B
C
justify-content: center
Trick to center (align-center, justify-center)A
B
C
justify-content: space-around
A
B
C
justify-content: space-between
A
B
C
justify-content: space-evenly
A
B
C
justify-content: end
A
B
C
more boxes items shrink to get fit within
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
shrink: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
shrink: 0, overflow: hidden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
shrink: 0, overflow: auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
shrink: 0, wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flex-grow: 1
A
B
C
flex-grow: 1 for A,C and 0.5 for B
A
B
C
Flex direction column, major axis (vertical)
display: flex, column
A
B
C
gap
A
B
C
more boxes with fixed parent height
shrink to get fit within
1
2
3
4
5
6
7
8
9
10
11
12
shrink: 0
1
2
3
4
shrink: 0, wrap
1
2
3
4
5
6
shrink: 0, overflow-auto
1
2
3
4
5
6
align-items
align-item: center
row wise center1
2
3
justify-content: center, fixed parent height
column wise center1
2
z index: 1
A
B
C
A
