CSS propertyFlexbox

justify-content

Positions items along the main axis of a flex or grid container.

Initial value: normal
Inherited: No
Animatable: no
Applies to: flex containers, grid containers, and multi-column containers
JavaScript: element.style.justifyContent = "center"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Preview

Definition and usage

The justify-content property decides what to do with the free space on a container’s main axis. In Flexbox, with flex-direction: row the main axis runs horizontally, so items can move left, right, to the center, or spread out with equal spacing.

It only works when free space remains. If the items fill the whole container (for example they have flex-grow: 1), changing the value has no effect.

In CSS Grid, the same property positions entire columns inside the container when the grid is narrower than the container.

Syntax

justify-content: normal | flex-start | flex-end | center | space-between | space-around | space-evenly | start | end;

Values

flex-start
Items line up at the start of the main axis. With the normal row direction, that’s the left edge.
flex-end
Items move to the end of the main axis.
center
Items group together in the center, and the free space splits evenly on both sides.
space-between
The first item sits at the start, the last at the end, and the remaining space is split evenly between the items.
space-around
Each item gets the same space on both sides, so the gaps at the edges are half the size of the gaps between items.
space-evenly
All the gaps are identical: between items and at the edges of the container.

Value	Description
flex-start	Items line up at the start of the main axis. With the normal row direction, that’s the left edge.
flex-end	Items move to the end of the main axis.
center	Items group together in the center, and the free space splits evenly on both sides.
space-between	The first item sits at the start, the last at the end, and the remaining space is split evenly between the items.
space-around	Each item gets the same space on both sides, so the gaps at the edges are half the size of the gaps between items.
space-evenly	All the gaps are identical: between items and at the edges of the container.

Values in practice

flex-start

Items line up at the start of the main axis. With the normal row direction, that’s the left edge.

.demo { justify-content: flex-start; }

flex-end

Items move to the end of the main axis.

.demo { justify-content: flex-end; }

center

Items group together in the center, and the free space splits evenly on both sides.

.demo { justify-content: center; }

space-between

The first item sits at the start, the last at the end, and the remaining space is split evenly between the items.

.demo { justify-content: space-between; }

space-around

Each item gets the same space on both sides, so the gaps at the edges are half the size of the gaps between items.

.demo { justify-content: space-around; }

space-evenly

All the gaps are identical: between items and at the edges of the container.

.demo { justify-content: space-evenly; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

To center a single item both horizontally and vertically, display: flex; justify-content: center; align-items: center; is all you need.
Use gap instead of margins between items. justify-content will only have to handle the remaining free space.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course