CSS Flexbox: align-content
The align-content property in CSS Flexbox is used to align multiple rows of flex items along the cross axis of the container (vertically if the flex-direction property is set on row). It applies only when flex-wrap property is set to wrap.
- stretch(default)
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- safe – supported by Firefox
- unsafe – supported by Firefox
stretch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
flex-start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
flex-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
space-between
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
space-around
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
space-evenly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
safe – supported by Firefox
1
2
3
4
5
6
7
8
9
10
11
12
13
14
unsafe – supported by Firefox
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Related
- CSS Flexible Box Layout
- CSS Flexbox: flex-direction
- CSS Flexbox: flex-wrap
- CSS Flexbox: align-items
- CSS Flexbox: justify-content