justify-content

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.

It is documented as part of the CSS Box Alignment, CSS Flexible Box Layout specification.

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

/* Syntax */
justify-content: normal;
justify-content: left;
justify-content: right;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;
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.

29+
20+
9+
12+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC