← Back to properties

CSS Property

justify-content

Flexbox

Aligns flex or grid items along the main axis.

Syntax

justify-content: value;

Example

justify-content: space-between;

Common use cases

  • Centering elements horizontally in a flex row
  • Distributing space between nav items
  • Pushing elements to opposite ends

Practical developer insight

In a column flex container, justify-content controls vertical alignment — the axis flips with flex-direction. Has no effect if there is no extra space in the container.

Related properties

align-itemsflex-directiondisplay