Align Content
*has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap)*
Sets the distribution of space between and around items.
Dropdown options:
- Flex Start: The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
-Flex End: The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
- Centre: Pack items around the center.
- Space-between: Distribute items evenly. The first item is flush with the start, and the last is flush with the end.
- Space-around: Distribute items evenly. Items have a half-size space on either end.
- Stretch: Distribute items evenly. Stretch 'auto'-sized items to fit the container.
Last updated