flex-direction row-reverse
flex-direction column-reverse
flex-wrap nowrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flex-wrap wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flex-wrap wrap-reverse
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flex-flow: row nowrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
justify-content flex-start
justify-content flex-center
justify-content flex-around
justify-content flex-between
justify-content flex-evenly
align-items: flex-baseline
1 1111 1111
2 222 22222
3 2 2 22 22
4 444 444 44
5 55 55 5 5 5
align-items: flex-stretch
align-content: flex-start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
align-content: flex-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
align-content: center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
align-content: space-between
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
align-content: space-around
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
align-content: stretch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
flex-shrink
1
2
3
4
5
6
7
8
9
10
11
12