The CSS justify-content property

Q: 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.

Q: 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.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

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

 Live example
                                    
                                    <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

 Live example
                                    
                                    
                                        
                                        
                                        
                                    
                                

                                    
                                

                                    <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-between for 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?

It aligns items along the main axis of a flex or grid container and distributes any leftover space, for example pushing them to the center or spreading them out with space-between.

Why is justify-content not working?

It only applies to flex and grid containers. If nothing changes, the element probably is not one. Add 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.

height letter-spacing

References