justify-content
justify-content distributes flex items along the main axis — packing them at the start, centering them, or spreading the leftover space between them with the space keywords.
Definition
justify-content controls how a flex container distributes its items along the main axis — the horizontal axis in a default row, the vertical axis once flex-direction: column is set. It decides what happens to the free space left over after the items are sized: whether it collects before them, after them, or is shared out between and around them.
It is the main-axis companion to align-items, which handles the perpendicular cross axis. Together the pair positions items in both directions, and understanding which axis each one touches is the key to using them without guesswork. justify-content only has an effect when there is free space to distribute, so it does nothing once the items completely fill the main axis.
Syntax
.container {
display: flex;
justify-content: center;
}
/* value: flex-start | center | flex-end |
space-between | space-around | space-evenly */Parameters
| Value | Effect |
|---|---|
flex-start | Packs items at the start of the main axis. This is the default — leftover space collects at the end. |
center | Groups items in the middle of the main axis, with equal free space before the first and after the last. |
flex-end | Packs items at the end of the main axis, leftover space collecting at the start. |
space-between | First item at the start, last item at the end, equal space between each pair — no space at the outer edges. |
space-around | Equal space around every item, so the edge gaps are half the size of the gaps between items. |
space-evenly | Equal space between every item and at both outer edges, so all gaps are identical. |
The three space keywords differ only in how they treat the outer edges: space-between gives them none, space-around gives them a half gap, and space-evenly gives them a full gap. That edge behavior is the entire distinction between them.
Return value
The visual effect is a redistribution of the free space along the main axis. With flex-start, center, or flex-end the items stay grouped and the free space collects on one side or is split around the group; with space-between, space-around, or space-evenly the free space is injected *between* the items, pushing them apart along the row (or column). It never changes item size — only where the items sit and where the gaps fall.
- It moves items only along the main axis; cross-axis position is governed by
align-items. - It has a visible effect only when free space exists — if items fill the axis, every value looks identical.
- When
flex-directioniscolumn, the main axis is vertical, sojustify-contentdistributes items top-to-bottom.
Examples
Center items on the main axis
.bar {
display: flex;
justify-content: center;
}Push items apart with space-between
space-around vs space-evenly, side by side
The clearest way to see the edge-gap difference is to stack the two on identical rows. Watch the space *before item 1* and *after item 3*: with space-around those edge gaps are half the size of the gaps between the items; with space-evenly every gap — edges included — is the same width.
Real-world navbar: logo left, links right
space-between is the classic one-line recipe for a navigation bar: it pins the first child to the left edge and the last child to the right edge, so a logo and a group of links push to opposite ends with no margins or floats.
Pack items at the end with flex-end
.toolbar {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* buttons collect at the right edge of the toolbar,
free space piling up on the left */Distribute items vertically in a column
Browser & runtime support
justify-content is part of the CSS Flexible Box Layout module and is supported in every current browser and has been for many years — it needs no vendor prefixes for modern targets. The same property name also applies in CSS Grid containers, where it distributes grid tracks along the inline axis, so the mental model carries over between the two layout systems you will use most.
A practical note on direction: because justify-content follows the main axis rather than a fixed compass direction, it also respects the writing mode and text direction of the document. In a right-to-left context flex-start sits on the right and flex-end on the left, and space-between still pins the first and last items to opposite ends of the row. This is a feature, not a quirk — it keeps a layout correct when the same markup is rendered in another language without any extra rules.
Frequently asked questions
What is the default value of justify-content?
flex-start, which packs flex items at the start of the main axis and leaves any free space at the end.What is the difference between space-between and space-around?
space-between puts no space at the outer edges — the first and last items touch the container edges. space-around gives each item equal space on both sides, so the edge gaps are half the size of the gaps between items.Why is justify-content not doing anything?
align-items.