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

Defines how the browser distributes space between and around content items along the main axis of a flex container or the inline axis of a grid container.

Quick example

.container {
  display: flex;
  justify-content: space-between;
} /* pushes items to the edges with even space between */

Syntax

justify-content: <alignment-keyword>

flex-start

Items pack toward the start of the main axis. This is the default behavior for flex containers.

flex-end

Items pack toward the end of the main axis.

center

Items center along the main axis with equal space on both sides.

space-between

First item sits at the start, last item at the end, remaining space distributed evenly between items.

space-around

Items get equal space around them. Items at the ends have half the space of items in the middle.

space-evenly

Items get truly equal space between them, including before the first and after the last.

stretch

Items stretch to fill the container along the main axis (grid only, and only when items have no defined size).

Quick facts

Initial value

normal

Inherited

Applies to

Flex and grid containers, multi-column containers

Animation type

discrete

Examples

Push items to the edges

.header {
  display: flex;
  justify-content: space-between;
}

Common pattern for navigation bars: logo on the left, menu on the right, gap automatically fills the middle.

Center a row of items

.toolbar {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

Centers a group of items horizontally. Use gap to control spacing between them.

Equal spacing around items

.tabs {
  display: flex;
  justify-content: space-evenly;
}

space-evenly gives equal space before, between, and after items. Different from space-around, where outer gaps are half the size of inner gaps.

justify-content Browser Support

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

29+

20+

12+

Common pitfalls

It only works when display is flex or grid

justify-content has no effect on a plain block container. You must set display: flex or display: grid on the parent first.

The main axis flips with flex-direction

justify-content aligns on the main axis. When flex-direction is row (default), that is horizontal. When flex-direction is column, the main axis is vertical. align-items controls the cross axis.

space-between with one item looks wrong

With a single flex item, space-between pushes it to the start (there is no gap to distribute). If you want a single item centered, use justify-content: center or margin: auto.