Justify-content
Learn main axis alignment with justify-content.
What is justify-content?
justify-content is the declaration that tells flex items how to spread along the main axis. In a horizontal container, items can sit left, right, centered, or evenly spaced; in a vertical container they sit top, bottom.
Common values: flex-start, flex-end, center and space-between. This lesson covers all four.
flex-start, flex-end, center
Three core alignments: flex-start packs items to the start of the main axis (left, when reading left to right); flex-end packs them to the end (right); center gathers them in the middle.
For example, to center buttons in a toolbar you write justify-content: center. All three change the alignment position; none of them equalize the gaps between items. For equal gaps, see the next card.
A toolbar with space-between
space-between spreads items along the main axis with equal gaps; the first item sits at the start, the last at the end, and the rest get equal space in between.
This value is perfect for a toolbar that keeps a logo on the left and a menu on the right. The two ends stick to the edges automatically while the middle ones share equal space. It is a common pattern in modern web app headers.
Exercise Spread the toolbar to both edges
Add a .toolbar class selector. Inside, write display: flex and justify-content: space-between. The logo on the left and the menu on the right will then open up with equal space between them.
Show example solution
/* spread the toolbar to both edges */
.toolbar {
display: flex;
justify-content: space-between;
}Test yourself
-
Which is a justify-content value?
.menu { display: flex; justify-content: ?; }- row
- column
- flex-end
- stretch
Show answer
flex-end — Correct. flex-end is a valid justify-content value; it packs items to the end of the main axis.
-
Spread the toolbar to both edges
.toolbar { display: flex; justify-content: ____; }Show answer
.toolbar { display: flex; justify-content: space-between; } -
Match the justify-content values
- flex-start
- Packs to the start
- flex-end
- Packs to the end
- center
- Gathers to the middle
- space-between
- Spreads with equal gaps