justifycontent

Justify-content is the official CSS property used in layout systems that implement the flexbox and grid models to control the distribution of space along the main axis inside a container. The standard spelling is justify-content; some references may write the term as a concatenated form, but the hyphenated version is the correct syntax in CSS.

In Flexbox, the main axis is determined by the flex-direction property, and justify-content aligns the items along that axis within the container. In CSS Grid, justify-content aligns the grid tracks within the grid container along the inline (horizontal) axis, affecting how the grid as a whole fills the container.

Common values for justify-content include flex-start, flex-end, center, space-between, space-around, and space-evenly. Some contexts and browser implementations also accept start, end, left, and right as aliases in certain writing modes. In grid contexts, the effects are analogous, applying to how grid tracks are positioned and spaced within the container.

A practical effect is that flex-start pushes items toward the start edge, while space-between distributes any remaining space evenly between items, space-around places equal space around each item, and space-evenly places equal space between all items and the container edges. Justify-content works alongside align-items, which handles cross-axis alignment, and align-content, which distributes space between multiple lines in a multi-line container.

Browser support for justify-content is strong in modern browsers for both flexbox and grid. Older browsers may require vendor-specific properties or have partial support, particularly for earlier flexbox syntax. For typical use, justify-content is applied with display: flex or display: grid to align and distribute content along the main axis.