The CSS justify-content property
The CSS justify-content property aligns items along the main axis of a flex or grid container and shares out the leftover space. The values you reach for most are center, space-between and flex-start. It only does anything on a container whose display is flex or grid.
Overview
justify-content is one half of how you position children inside a Flexbox or Grid container. It works along the main axis — the direction items flow — which is horizontal by default, and it only kicks in once there is spare room left over after the items are laid out.
The plain alignment values (flex-start, center, flex-end) push the whole group to one end or the middle. The distribution values are where it earns its keep: space-between pins the first and last items to the edges and spreads the gaps evenly between the rest — perfect for a nav bar with a logo on the left and links on the right — while space-around and space-evenly add space on the outside too.
For vertical alignment you want its companion, align-items, which works on the cross axis. Set both and you can center something in two directions with three lines of CSS — the modern answer to the old "how do I center a div" question.
Syntax
selector {
display: flex; /* or grid */
justify-content: value;
}
/* logo left, links right */
.nav {
display: flex;
justify-content: space-between;
}Values
The justify-content property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
flex-start |
Packs items to the start of the main axis (the left, by default). The default value. |
center |
Centers the group of items along the main axis. |
flex-end |
Packs items to the end of the main axis (the right, by default). |
space-between |
First and last items touch the edges; equal space sits between the rest. |
space-around |
Equal space around every item, so the outer gaps are half the inner ones. |
space-evenly |
Equal space between and around every item, outer gaps included. |
Examples
<style>
.nav {
display: flex;
justify-content: space-between;
background: #0f172a;
padding: 12px 16px;
border-radius: 10px;
font: 600 14px system-ui, sans-serif;
}
.nav span { color: #fff; }
.nav a { color: #93c5fd; text-decoration: none; margin-left: 14px; }
</style>
<div class="nav">
<span>Logo</span>
<span><a href="#">Docs</a><a href="#">Pricing</a><a href="#">Login</a></span>
</div>Example #2
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
height: 110px;
background: #eef2ff;
border-radius: 10px;
}
.box div {
background: #1c7ce9;
color: #fff;
padding: 12px 20px;
border-radius: 8px;
font: 600 15px system-ui, sans-serif;
}
</style>
<div class="box"><div>Centered both ways</div></div>Best practices
- Remember it only works on a flex or grid container. On a plain block it does nothing — set display: flex first.
- Use
space-betweenfor navigation bars and toolbars where the ends should hug the edges. - Pair it with align-items: center to center content both horizontally and vertically.
- For the gaps between items, prefer gap over the space-* values when you want a fixed, predictable spacing rather than distributed slack.
Frequently asked questions
What does justify-content do?
space-between.Why is justify-content not working?
display: flex (or grid) to the container first.What is the difference between justify-content and align-items?
justify-content works along the main axis (horizontal by default); align-items works along the cross axis (vertical by default). Together they position items in both directions.What is the difference between space-between and space-around?
space-between puts no space on the outer edges — the first and last items touch the container edges. space-around adds space outside the end items too, so the edge gaps are half the size of the gaps between items.