CSS Justify Content

CSS Justify Content

The CSS justify-content property controls how flex items are aligned and how available space is distributed along the main axis of a flex container.

The main axis is determined by flex-direction. In a row layout, justify-content commonly controls horizontal distribution. In a column layout, it commonly controls vertical distribution.

How justify-content Works

The justify-content property works along the main axis after the sizes of the flex items have been determined.

.flex-container {
  display: flex;
  justify-content: center;
}

If the flex items use less main-axis space than the container provides, the remaining space can be placed before the items, after the items, or distributed between and around them.

The direction of the main axis is important. It is controlled by flex-direction, so justify-content should not be thought of as a property that always controls horizontal alignment.

justify-content Values

Common Flexbox values for justify-content include alignment values and space-distribution values.

The initial value of justify-content is normal. In a flex container, normal behaves like start for main-axis distribution.

justify-content: flex-start

The flex-start value packs the flex items toward the main-start side of the flex container.

.flex-container {
  display: flex;
  justify-content: flex-start;
}

With flex-direction: row in a typical left-to-right horizontal writing mode, the items appear toward the left side of the container.

If the main-axis direction changes, the location of flex-start changes with it.

justify-content: flex-end

The flex-end value packs the flex items toward the main-end side of the flex container.

.flex-container {
  display: flex;
  justify-content: flex-end;
}

With a normal row direction in a left-to-right writing mode, the items appear toward the right side of the container.

Unlike changing flex-direction, this does not reverse the visual sequence of the items. It moves the group toward the end of the main axis.

justify-content: center

The center value packs the flex items together at the center of the main axis.

.flex-container {
  display: flex;
  justify-content: center;
}

Available space is distributed on both sides of the group of flex items.

This is a common way to center a group of items along the main axis without adding margins to the individual items.

justify-content: space-between

The space-between value places the first item at main-start and the last item at main-end, then distributes the remaining space evenly between neighboring items.

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

No additional distributed space is placed before the first item or after the last item.

This value is often useful when two or more items should occupy opposite sides of the available space.

justify-content: space-around

The space-around value distributes space around each flex item.

.flex-container {
  display: flex;
  justify-content: space-around;
}

Each item receives equal space on both sides. Because the spaces between adjacent items meet, the space between items is twice the space between an outer item and the container edge.

justify-content: space-evenly

The space-evenly value distributes the available space so the gaps between neighboring items and the spaces between the outer items and container edges are equal.

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

This provides visually even spacing across the entire main axis.

start and end Values

The Box Alignment specification also defines logical alignment values such as start and end.

.flex-container {
  display: flex;
  justify-content: start;
}

These values align content with the start or end side of the relevant axis according to the writing mode.

Flexbox also supports the older flex-specific flex-start and flex-end values, which are commonly encountered in existing stylesheets and Flexbox examples.

Available Space

The effect of justify-content depends on there being distributable space along the main axis.

.flex-container {
  display: flex;
  justify-content: space-between;
}
.item {
  flex: 1;
}

If flexible items grow until they consume all available main-axis space, there may be no remaining space for justify-content to distribute.

This is why changing justify-content may appear to have no effect in some Flexbox layouts. Check whether the items already occupy the available main-axis space.

Flex Direction and Justification

Because justify-content always works along the main axis, its visual direction changes with flex-direction.

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
}

In the row example, the items are centered along the row's main axis. In the column example, they are centered along the column's main axis.

A column container needs available vertical space before vertical distribution can be seen clearly.

CSS Justify Content Example

The following example compares six commonly used justify-content values. Open the example in the editor and change the values to see how the available space is distributed along the main axis.

.flex-container {
  display: flex;
}
.center {
  justify-content: center;
}
.space-between {
  justify-content: space-between;
}
.space-evenly {
  justify-content: space-evenly;
}