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.

Try a demo