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