Justify Content

How the browser distributes space between and around items.

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