Syllabus

On this page

CSS justify-content: Align Flex Items on the Main Axis

Badar KhalilUpdated October 1, 2026 4 min read

What Is justify-content in CSS?

The justify-content property aligns flex items along the main axis of a flex container and distributes the free space between and around them. It is one of the most used flexbox properties for building navigation bars, headers, toolbars, button groups and centered layouts. If you want to center items horizontally with CSS flexbox, justify-content: center is the answer.

Syntax

Code

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

The default value is flex-start (the initial value is normal, which behaves like flex-start in flexbox).

How justify-content Works

justify-content only distributes free space, which is the leftover space in the main axis after all items have taken their size. If the items already fill the whole line, there is no free space and justify-content will seem to do nothing. Also remember that the main axis depends on flex-direction. In a row it is horizontal, in a column it is vertical.

justify-content Values Explained

Value	Result
`flex-start`	Items are packed at the start of the main axis.
`flex-end`	Items are packed at the end of the main axis.
`center`	Items are centered with equal free space on both sides.
`space-between`	First item at the start, last item at the end, equal space between items.
`space-around`	Equal space around each item. The edge gaps are half the size of the gaps between items.
`space-evenly`	Equal space between items and at both edges.

justify-content: flex-start

The default behavior. Items are grouped at the beginning of the line, so with a row direction they sit on the left in left-to-right languages.

justify-content: flex-end

Items are grouped at the end of the line. Useful for right-aligned action buttons, such as Save and Cancel in a form footer.

justify-content: center

Items are grouped in the middle. Combine it with align-items: center to center anything both horizontally and vertically, which is the modern way to center a div in CSS.

justify-content: space-between

The first item touches the start edge, the last item touches the end edge, and the remaining space is split between items. This is the classic navigation bar pattern with a logo on the left and links on the right.

justify-content: space-around

Each item gets equal space on both sides. This results in half-size gaps at the container edges and full-size gaps between items.

justify-content: space-evenly

Every gap, including the first and last, has exactly the same size. It gives the most visually balanced result for icon rows and feature lists.

Other Values You Should Know

start and end: logical values that follow the writing mode instead of the flex direction.
left and right: physical values that ignore flex-direction.
stretch: has no effect in flexbox, but works in CSS Grid.
safe center and unsafe center: with safe, an overflowing item is aligned to start instead of being cut off on both sides.

Centering with justify-content

Code

.center {
  display: flex;
  justify-content: center; /* horizontal in row */
  align-items: center;     /* vertical in row */
  min-height: 100vh;
}

justify-content in a Column Layout

When flex-direction is column, the main axis is vertical, so justify-content controls vertical positioning. The container needs a height larger than its content, otherwise there is no free space to distribute.

justify-content and the gap Property

The gap property sets the minimum space between items. justify-content then distributes whatever free space remains. With space-between, the final space between items is at least the gap value.

justify-content Cheat Sheet

Left aligned: flex-start
Right aligned: flex-end
Centered: center
Logo left, menu right: space-between
Balanced icon row: space-evenly

Common Mistakes

Using justify-content when there is no free space. Add width to the container or reduce item sizes.
Confusing justify-content and align-items. justify-content is main axis, align-items is cross axis.
Forgetting the height in column layouts.
Using justify-content on the items. It is a container property.

FAQ

How do I center a div horizontally with flexbox?

Set display: flex and justify-content: center on the parent.

What is the difference between space-around and space-evenly?

space-around gives half-size gaps at the edges, space-evenly gives all gaps the same size.

Why is justify-content not working?

Check that the parent has display: flex, that there is free space on the main axis, and that you are not mixing up row and column direction.

Key Takeaways

justify-content aligns items on the main axis.
Six main values: flex-start, flex-end, center, space-between, space-around, space-evenly.
It distributes free space only.
Pair it with align-items to center in both directions.

Try it Yourself HTML

<style>
.container{display:flex;justify-content:flex-start;gap:8px;padding:10px;background:#ecf0f1;border-radius:8px;}
.item{background:#3498db;color:#fff;padding:14px 20px;border-radius:6px;font-family:sans-serif;font-weight:bold;}
</style>
<div class='container'>
<div class='item'>A</div>
<div class='item'>B</div>
<div class='item'>C</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.container{display:flex;justify-content:center;gap:8px;padding:10px;background:#ecf0f1;border-radius:8px;}
.item{background:#27ae60;color:#fff;padding:14px 20px;border-radius:6px;font-family:sans-serif;font-weight:bold;}
</style>
<div class='container'>
<div class='item'>A</div>
<div class='item'>B</div>
<div class='item'>C</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#2c3e50;border-radius:8px;font-family:sans-serif;}
.logo{color:#fff;font-weight:bold;font-size:20px;}
.links{display:flex;gap:16px;}
.links a{color:#ecf0f1;text-decoration:none;}
</style>
<nav class='navbar'>
<div class='logo'>MyBrand</div>
<div class='links'>
<a href='#'>Home</a>
<a href='#'>Courses</a>
<a href='#'>Contact</a>
</div>
</nav>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.row{display:flex;gap:6px;padding:10px;background:#ecf0f1;border-radius:8px;margin-bottom:10px;font-family:sans-serif;}
.row div{background:#e67e22;color:#fff;padding:10px 16px;border-radius:6px;}
.between{justify-content:space-between;}
.around{justify-content:space-around;}
.evenly{justify-content:space-evenly;}
</style>
<p style='font-family:sans-serif'>space-between</p>
<div class='row between'><div>1</div><div>2</div><div>3</div></div>
<p style='font-family:sans-serif'>space-around</p>
<div class='row around'><div>1</div><div>2</div><div>3</div></div>
<p style='font-family:sans-serif'>space-evenly</p>
<div class='row evenly'><div>1</div><div>2</div><div>3</div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.hero{display:flex;justify-content:center;align-items:center;height:200px;background:#8e44ad;border-radius:8px;}
.hero h2{color:#fff;font-family:sans-serif;margin:0;}
</style>
<div class='hero'>
<h2>Perfectly Centered</h2>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.box{display:flex;gap:8px;padding:10px;background:#ecf0f1;border-radius:8px;}
.item{background:#c0392b;color:#fff;padding:14px 20px;border-radius:6px;font-family:sans-serif;font-weight:bold;}
</style>
<select onchange='document.getElementById(`jc`).style.justifyContent=this.value'>
<option>flex-start</option>
<option>flex-end</option>
<option>center</option>
<option>space-between</option>
<option>space-around</option>
<option>space-evenly</option>
</select>
<div class='box' id='jc'>
<div class='item'>A</div>
<div class='item'>B</div>
<div class='item'>C</div>
</div>

Output

Press Run to execute.

Exercise: Build a Header with justify-contentHTML

Build a header with a logo on the far left and three links on the far right. Use display: flex on the header and the correct justify-content value to push the logo and the links to opposite edges. Then create a footer button group where two buttons are aligned to the right side.

Try it Yourself HTML

<style>
.header{
  /* TODO: display flex */
  /* TODO: push logo left and links right */
  align-items:center;padding:12px 20px;background:#2c3e50;font-family:sans-serif;border-radius:8px;
}
.logo{color:#fff;font-weight:bold;}
.links a{color:#ecf0f1;margin-left:12px;text-decoration:none;}
.footer{
  /* TODO: display flex */
  /* TODO: align buttons to the right */
  gap:8px;margin-top:16px;
}
</style>
<div class='header'>
<div class='logo'>Logo</div>
<div class='links'><a href='#'>Home</a><a href='#'>Blog</a><a href='#'>Contact</a></div>
</div>
<div class='footer'>
<button>Cancel</button>
<button>Save</button>
</div>

Output

Press Run to execute.

Show expected output

The logo sits on the far left and the links on the far right of the header. The Cancel and Save buttons are aligned to the right edge of the footer.

This is a self-check — compare your result with the expected output above.

Quiz: justify-content Quiz Pass 70%

Loading quiz…

Was this page helpful?