← All languages
CSS construct of the day
Random

justify-content

Aligns flex or grid items along the main axis.

Description

The justify-content property 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.

In flexbox, the main axis depends on flex-direction: horizontal for row (default), vertical for column. Common values include center for centering, space-between for equal space between items, and space-around or space-evenly for different spacing distributions.

This property only has an effect when there is extra space to distribute. If flex items fill the entire main axis (e.g., due to flex-grow), justify-content has no visible effect.

Arguments

NameDescriptionOptional
value Common values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end. No

Example

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

Reference