justify-content

Controlling how items are aligned along its main axis.

Overview

Examples

Align items on the main axis

Use justify-* utilities to distribute flex or grid items along the container main axis. In a default row flexbox, that axis is horizontal.

<nav class="flex justify-between">    <a href="/">Home</a>    <a href="/settings">Settings</a></nav>

@layer utilities {    .flex {        display: flex    }    .justify-between {        justify-content: space-between    }}

Start, center, or end a group

Use justify-start, justify-center, and justify-end for the most common positional alignment.

<div class="flex justify-center gap:sm">    <button>Cancel</button>    <button>Save</button></div>

In a column flexbox, the main axis becomes vertical, so justify-center centers items vertically instead.

<section class="flex flex-col justify-center h:64x">    ...</section>

Distribute extra space

Use justify-between, justify-around, or justify-evenly when the container has extra space to distribute between items.

<ul class="flex justify-evenly gap:sm">    <li>One</li>    <li>Two</li>    <li>Three</li></ul>

Use gap:* when the distance between items should be fixed. Use justify-* when the remaining container space should control placement.

Use explicit CSS values

Use justify-content:<value> when you need a value that does not have a shortcut.

<div class="flex justify-content:safe|center">    ...</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="justify-start justify-center@sm justify-between@lg justify-start@print">...</div>

Use align-items for the cross axis.