Justify Content

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

For the CSS Flexbox and CSS Grid , the justify-content property is how you control the distribution of items along their main axis (usually horizontal).

Justify-content is a flexbox value that helps us align items along the primary axis of our Flexbox (or Grid) container. It controls how any additional white space inside the container is allocated between or around the items, so you can quickly bunch things at the beginning/end or middle as needed. It also provides an elegant gray space-away-from-each-other option ( space-between) or an equal-margin-all-around option ( space-evenly).

This property is what you need to control the placement of any unused white space in a row. The options control whether the space is pushed out between the ends, placed down the center, or distributed evenly between items.

1. The Core Values

In order to use these, the element with the class had to be a flex or grid container (via display: flex; or display: grid;.

Value	What it does
`flex-start`	(Default) Pushes all items to the beginning of the row.
`flex-end`	Pushes all items to the end of the row.
`center`	Bundles all items together in the middle.
`space-between`	First item at the start, last item at the end, equal space in the middle.
`space-around`	Items have equal space on both sides (inner gaps are double the outer gaps).
`space-evenly`	All empty spaces (including the edges) are exactly the same size.

2. Visualizing the Spacing

Understanding how the “empty space” is going to be spread out is probably the simplest way to learn this.

The “Space” Trio Explained

Space-between: Imagine this as “No gaps between”. Works well for navigation bar to have the logo on the extreme left and login button on the extreme right.
Space-around: There is “buffer” space around the outside of each element. Having a right buffer on Item A and left buffer on B means the space between A and B appears twice as wide as that at the edges.
Space-evenly: this is the “fair” one. The gap from the wall to the first item will be the same as the gap inbetween any two items.

3. Important Context: The Main Axis

A mistake made quite frequently is to think justify-content simply means “horizontal.”

In a standard row ($flex-direction: row$), it is horizontal.
If you rotate your container into a column ($flex-direction: column$), justify-content now controls the vertical alignment.

Pro Tip: If your items aren‘t moving when you apply justify-content, look at whether or not you have set your container element‘s width. If you only set it to be as wide as the elements inside of it, well, there‘s no “extra space” to move them around in!