The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis; that is, it specifies the behavior of the boxes in the axis when they wrap into multiple lines. Nothing here affects left ot right, just vertical alignment of wrapped cells. This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap)
Basic Positioning
-
center: Pack items around the center
-
start : Pack items from the start
-
end: Pack items from the end
-
flex-start: Pack flex items from the start
-
flex-end: Pack flex items from the end
Normal alignment
Baseline alignment
-
baseline :
-
first baseline :
-
last baseline :
Distributed alignment
-
space-between : Distribute items evenly. The first item is flush with the start, the last is flush with the end
-
space-around : Distribute items evenly. Items have a half-size space on either end
-
space-evenly : Distribute items evenly Items have equal space around them
-
stretch : Distribute items evenly. Stretch 'auto'-sized items to fi the container
Overflow alignment
-
safe center :
-
unsafe center :
Global values
-
inherit :
-
initial :
-
revert :
-
revert-layer :
-
unset :
