# Justify Content

How the browser distributes space between and around items.

<figure><img src="https://2650739216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnVmamp3TnQON29mRg6Hg%2Fuploads%2F64JLpezo9CI5hi7y0YBG%2Fflexbox%20settings%20-%20justify%20content.png?alt=media&#x26;token=10fb0f43-ae3d-47dd-9852-304f27eff6bd" alt=""><figcaption></figcaption></figure>

Dropdown options:

\- **Flex start**: Pack flex items from the start.

\- **Centre**: Pack items around the center.

\- **Flex end**: Pack flex items from the end.

\- **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. Start and end gaps are half the size of the space between each item.

\- **Space evenly**: Distribute items evenly. Start, in-between, and end gaps have equal sizes.

[Try a demo](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#try_it)&#x20;