CSS justify-content property: Syntax, Usage, and Examples

The justify-content property controls how space is distributed between and around items inside a flex or grid container along the main axis. Use it to push items to the start, center them, spread them out evenly, or create consistent gaps without adding extra spacer elements.

How to Use the justify-content property

You set justify-content on the container, not on the children. It works with display: flex and display: grid, but the “main axis” depends on layout mode.

Here is the basic syntax:

.container {
display: flex;/* or grid */
justify-content: center;
}

Common values include:

• flex-start: items pack at the start of the main axis
• center: items pack in the center
• flex-end: items pack at the end
• space-between: first item at start, last item at end, equal space between the rest
• space-around: equal space around each item, edges get half the space
• space-evenly: equal space between every gap, including edges

In flex layouts, the main axis can change

In a flex row, the main axis runs left to right, so justify-content moves items horizontally. In a flex column, it runs top to bottom, so justify-content moves items vertically.

.row {
display: flex;
flex-direction: row;
justify-content: space-between;/* horizontal spacing */
}

.column {
display: flex;
flex-direction: column;
justify-content: center;/* vertical spacing */
min-height:240px;
}

A good mental shortcut: justify-content follows the direction of flex-direction.

In grid layouts, justify-content aligns the whole grid

In grid, justify-content aligns the entire grid “track area” inside the container. That means it does not distribute space inside each cell. It moves the grid itself when the grid is narrower than the container.

.grid {
display: grid;
grid-template-columns:120px120px120px;
justify-content: center;
}

If your grid fills the full width already, justify-content will not appear to do anything.

Quick pairing tip: justify-content and align-items

• justify-content aligns along the main axis
• align-items aligns along the cross axis

In a row flex container, justify-content is horizontal and align-items is vertical. In a column, it flips.

When to Use the justify-content property

The justify-content property shines when you need layout spacing that adapts to different screen sizes and content lengths.

1) Building a navigation bar with left and right sections

A common header pattern is a logo on the left and actions on the right. space-between handles that cleanly.

2) Centering a group of controls or buttons

Toolbars, pagination, and filter chips often look best centered. justify-content: center keeps them together without guessing margins.

3) Creating evenly distributed card rows

For small sets of items, space-evenly and space-around can create a balanced look without manually spacing each item.

4) Pushing one item away from the rest

Sometimes you want three items on the left and one on the far right. You can do that with justify-content plus a flexible spacer, or by using margin-left: auto on one item. Both are valid, depending on readability.

5) Aligning a grid when it does not fill the container

A grid of fixed-width cards can look awkward when stuck to the left on large screens. justify-content: center or end makes the placement look intentional.

Examples of the justify-content property

1) A header layout with space-between

This pattern shows up everywhere, from dashboards to blogs.

<headerclass="topbar">
<aclass="brand"href="#">Mimo Notes</a>
<navclass="links"aria-label="Top navigation">
<ahref="#">Docs</a>
<ahref="#">Pricing</a>
<ahref="#">Sign in</a>
</nav>
</header>

.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding:12px16px;
border:1px solid#ddd;
}

.links {
display: flex;
gap:14px;
}

justify-content: space-between pushes the brand left and the nav right, while gap keeps links evenly spaced.

2) Centered pagination controls

This makes the layout feel calmer, especially on mobile.

<navclass="pager"aria-label="Pagination">
<buttontype="button">Prev</button>
<spanclass="page">Page 2 of 8</span>
<buttontype="button">Next</button>
</nav>

.pager {
display: flex;
justify-content: center;
align-items: center;
gap:12px;
padding:12px;
border:1px solid#eee;
}

All three elements stay grouped in the center, and the gap stays consistent without margin hacks.

3) Even spacing across a row with space-evenly

This works nicely for a small feature list.

<sectionclass="features"aria-label="Key features">
<divclass="chip">Fast setup</div>
<divclass="chip">Offline support</div>
<divclass="chip">Accessible UI</div>
</section>

.features {
display: flex;
justify-content: space-evenly;
align-items: center;
padding:14px;
border:1px solid#eee;
}

.chip {
padding:8px12px;
border:1px solid#ccc;
border-radius:999px;
}

space-evenly gives the same spacing on the edges and between chips, which often looks more balanced than space-between.

4) A column layout that centers items vertically

This example uses a column flex container, so the main axis is vertical. justify-content: center places the content in the middle vertically.

<sectionclass="empty-state"aria-label="No results">
<h2>No results</h2>
<p>Try changing your filters or searching for a shorter phrase.</p>
<buttontype="button">Clear filters</button>
</section>

.empty-state {
display: flex;
flex-direction: column;
justify-content: center;
gap:10px;
min-height:260px;
padding:18px;
border:1px solid#ddd;
}

5) Centering a narrow grid inside a wide container

This shows how justify-content behaves in grid. The grid tracks stay fixed width, so the whole grid block can move inside the container.

<sectionclass="grid-wrap"aria-label="Project templates">
<divclass="grid">
<articleclass="card">Landing page</article>
<articleclass="card">Portfolio</article>
<articleclass="card">Newsletter</article>
<articleclass="card">Dashboard</article>
</div>
</section>

.grid {
display: grid;
grid-template-columns:180px180px;
gap:14px;
justify-content: center;
}

.card {
padding:14px;
border:1px solid#ccc;
background: white;
}

The justify-content: center centers the whole grid area, not the content inside each card.

Learn More About the justify-content property

justify-content vs justify-items (grid confusion alert)

These get mixed up a lot because the names sound like cousins.

• justify-content aligns the entire grid inside its container
• justify-items aligns items inside their grid cells

If you want the text or card inside each grid cell to align, justify-items is usually the tool.

.grid {
display: grid;
justify-items: start;
}

justify-content vs space created by gap

gap creates consistent space between items. justify-content distributes leftover space in the container. These can work together, but stacking them can create “too much air.”

A common approach:

• Use gap for predictable spacing between items
• Use justify-content for big positioning decisions, like center or space-between

For example, a nav bar might use space-between for left and right groups and gap inside each group.

A practical alternative: margin-left: auto

If you want one item to “break away” to the far end, margin-left: auto in a flex row is simple and readable.

<divclass="toolbar">
<buttontype="button">Filter</button>
<buttontype="button">Sort</button>
<buttontype="button"class="danger">Delete</button>
</div>

.toolbar {
display: flex;
align-items: center;
gap:10px;
}

.danger {
margin-left: auto;
}

This pushes only the last button to the far right, while the first two stay grouped on the left.

RTL and writing modes

On pages with right-to-left text or different writing modes, start and end can behave differently than left and right. If you build international layouts, values like start and end can be easier to reason about in grid contexts. In flex, flex-start and flex-end remain common, but keep writing direction in mind when testing.

Debugging fast when justify-content “does nothing”

These are the usual culprits:

• justify-content is on the child, not the container.
• The container is not display: flex or display: grid.
• There is no free space, items already fill the container.
• In grid, the grid tracks already stretch to fill the container, so the grid area cannot move.

If you need to see the effect quickly, give the container a fixed width or add max-width so extra space exists to distribute.

Summary

The justify-content property controls how items are positioned and spaced along the main axis in flex, and how the grid area is positioned in grid. Use center for grouped controls, space-between for split layouts like headers, and space-evenly for balanced spacing. Pair it with gap for predictable spacing, and remember that flex-direction changes what “main axis” means.