align-content Property
view_quilt
Aligns
flex lines
within the flex container
wrap_text
Only applies when
flex-wrap
is wrap or wrap-reverse
vertical_distribute
Controls distribution of
extra space
in cross axis
format_align_center
center:
Lines packed toward center of container
space_bar
space-between:
Lines evenly distributed, first at start, last at end
code
align-content Examples
.container
{
display
:
flex
;
flex-wrap
:
wrap
;
align-content
:
space-between
;
}
.centered-container
{
display
:
flex
;
flex-wrap
:
wrap
;
align-content
:
center
;
}
vertical_align_top
flex-start
1
2
3
4
5
6
7
8
9
vertical_align_bottom
flex-end
1
2
3
4
5
6
7
8
9
vertical_align_center
center
1
2
3
4
5
6
7
8
9
space_bar
space-between
1
2
3
4
5
6
7
8
9
swap_vert
space-around
1
2
3
4
5
6
7
8
9
all_inclusive
stretch
1
2
3
4
5
6
7
8
9