justify-content in CSS: distributing space on the main axis without a single margin

Once items are lined up along a flex container's main axis, one question is still open: what happens to any space left over, if there is any? justify-content answers exactly that question, distributing the available space across six distinct behaviors.

It comes up whenever buttons need even spacing, an element needs pinning to each end of a bar, or a small group of items needs centering inside a wider space, with no margin math involved at all.

Definition

justify-content is the property that distributes the available space between the items inside a Flexbox container, along its main axis, meaning the direction chosen by flex-direction. It only applies to the container itself, never directly to the children.

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

That declaration groups every flex item at the center of the container, leaving equal space on each side of the group.

The six values and what they do

Each value treats the available space differently, ranging from tight grouping to fully even distribution.

The difference between the three space- values comes down entirely to the container's edges. space-between leaves no space before the first item or after the last. space-around does leave space there, but half the size of the space between two items, since each item only gets a half share on its outer side. space-evenly fixes that irregularity and forces the same space everywhere, edges included.

A concrete example

An action bar with a cancel button on the left and a confirm button on the right shows off justify-content's most common use.

.action-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

space-between pushes the two buttons toward opposite ends of the bar, no matter how many buttons get added between them: the space recalculates itself automatically.

The direction pitfall

justify-content acts on the main axis, not on the horizontal axis by definition. On a container with flex-direction: column, that same justify-content: center centers items vertically, not horizontally.

When there is no space left to distribute

Every value of justify-content rests on one implicit assumption: that some space remains inside the container once every item is placed side by side. If the combined width of the items already exceeds the container's width, there is nothing left to distribute, and space-between, space-around, or space-evenly all end up behaving like flex-start, with no error and no console warning to flag it.

This case shows up often with dynamic content, like a list of filters whose count varies with search results: past a certain number of items, the carefully chosen spacing simply disappears, replaced by a plain alignment at the start of the line.

Frequently asked questions

justify-content acts on the flex container's main axis, the one set by flex-direction. align-items acts on the cross axis, perpendicular to the first one. On a plain row, justify-content handles horizontal positioning and align-items handles vertical, but those roles swap if flex-direction switches to column.

Yes, the property also exists in a grid context, where it distributes the grid's columns inside the container if they take up less width than the space available. Its behavior stays conceptually the same: distributing the leftover space according to the chosen value.

With only one flex item inside the container, there is just one block to position, and space-between systematically pins it against the start of the axis, since there is no second item to distribute space against. For centering a single item, the center value works better.