Justify Content (Main Axis) in CSS
From the CSS Flexbox cheat sheet · Alignment · verified Jul 2026
Justify Content (Main Axis)
Align and distribute flex items along the main axis (horizontal by default)
css
.container {
justify-content: flex-start; /* align to start */
justify-content: flex-end; /* align to end */
justify-content: center; /* center items */
justify-content: space-between; /* space between */
justify-content: space-around; /* space around */
justify-content: space-evenly; /* equal space */
}html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>🎨 Center
1
2
3
🎨 Space Between
1
2
3
↔️ Controls main axis alignment
💡 Distributes extra space
⚡ space-between for nav bars