# 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.<br>

<figure><img src="https://2650739216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnVmamp3TnQON29mRg6Hg%2Fuploads%2FQlkQk1G4tuba0Gj3vFjF%2Fflexbox%20settings%20-%20align%20content.png?alt=media&#x26;token=cd83853b-bf55-4473-91ec-0d48e384375a" alt=""><figcaption></figcaption></figure>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#try_it)