How to space items evenly
Short answer
justify-content: space-between puts the outer items at the edges and shares the rest of the space equally:
<div style="display: flex; justify-content: space-between; padding: 8px; background: whitesmoke;">
<span>Home</span><span>Blog</span><span>Shop</span><span>Contact</span>
</div>Three ways to share the space
Compare the values: space-around gives half a gap at the edges, space-evenly gives equal gaps everywhere:
<style>
.r { display: flex; margin-bottom: 6px; background: whitesmoke; }
.r b { padding: 4px 10px; background: gold; }
</style>
<div class="r" style="justify-content: space-between;"><b>A</b><b>B</b><b>C</b></div>
<div class="r" style="justify-content: space-around;"><b>A</b><b>B</b><b>C</b></div>
<div class="r" style="justify-content: space-evenly;"><b>A</b><b>B</b><b>C</b></div>A fixed gap
If the items should sit together with a set gap rather than spread across the full width, use gap:
<div style="display: flex; gap: 16px;">
<button>Save</button><button>Cancel</button><button>Help</button>
</div>Common mistake
Spacing with margin-right on every item leaves an extra margin after the last one, which you then remove with :last-child. gap adds space only between the items — no extra rules needed.
Functions used in this recipe
- justify-content — Distributes items along the main axis of a flex or grid container.
- gap — The gaps between items in flexbox and grid.
- flex — A shorthand for how a flex item grows, shrinks and what size it starts from.