justify-content decides how items are placed along the main axis (left to right for a row) when there is extra space.
index.html
HTML
<style>
.container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
.box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
.container { display: flex; margin-bottom: 8px; }
.box { padding: 8px 14px; }
p { margin: 6px 0 2px; font-size: 13px; }
</style>
<p>flex-start</p><div class="container" style="justify-content:flex-start"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>center</p><div class="container" style="justify-content:center"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>flex-end</p><div class="container" style="justify-content:flex-end"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>space-between</p><div class="container" style="justify-content:space-between"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>space-around</p><div class="container" style="justify-content:space-around"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>space-evenly</p><div class="container" style="justify-content:space-evenly"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>What each does
| Value | Result |
|---|---|
flex-start | Items packed at the start (default) |
center | Items packed in the middle |
flex-end | Items packed at the end |
space-between | First and last touch the edges, equal space between items |
space-around | Equal space around each item (half-size gaps at the edges) |
space-evenly | Exactly equal gaps everywhere, including the edges |
Real examples
A header with a logo on the left and links on the right:
style.css
CSS
.header { display: flex; justify-content: space-between; align-items: center; }A row of buttons centered on the page: justify-content: center.
info
Needs free space
justify-content has nothing to do if the items already fill the line, for example when they have flex-grow. It only distributes leftover room.