F flexr.dev

Layout Recipe

Space Links Evenly with Tailwind justify-evenly

'justify-evenly' distributes children so the space before, between, and after every item is identical — visually calmer than 'justify-between' (which pins the outer items to the edges) and more balanced than 'justify-around' (which halves the outer spacing). It is the right pick for footer link rows, social icon strips, and bottom tab bars. Toggle between the three in the playground above to see the difference instantly.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Current Layout:

Tailwind Space Evenly via justify-evenly

Use the justify-evenly utility class to space elements evenly across the main axis. It places equal space before the first item, between every pair, and after the last item, keeping a row of links or icons perfectly balanced at any container width.

Add it to a flex row and every child gets the same breathing room on both sides.

Tailwind 
<nav class="flex justify-evenly">
  <a href="/about">About</a>
  <a href="/blog">Blog</a>
  <a href="/contact">Contact</a>
</nav>
Vanilla CSS 
.links {
  display: flex;
  justify-content: space-evenly;
}

evenly vs between vs around

The three distribution utilities differ only in their edge spacing. justify-between puts zero space outside the first and last items, so they touch the edges. justify-around gives the outer items half the spacing of the inner gaps. justify-evenly makes every space — including the outer two — exactly equal. For a balanced footer or tab bar, justify-evenly reads the cleanest.

Even spacing that wraps

For a link row that should reflow on small screens while staying evenly spaced, combine flex flex-wrap justify-evenly gap-y-2. Items wrap onto new lines and each line stays evenly distributed.

Common mistakes

Expecting a fixed gap. justify-evenly distributes free space, so it does nothing once items fill the row — add gap for a guaranteed minimum.

Using it on a non-flex element. It needs a flex (or grid) container.

Confusing it with justify-between. Between pins items to the edges; evenly pads the edges too.

Frequently asked questions

What does justify-evenly do in Tailwind?
It distributes flex items so the space before, between, and after every item is identical, keeping a row perfectly balanced.
What is the difference between justify-evenly, justify-between, and justify-around?
justify-between puts no space at the outer edges, justify-around gives the edges half spacing, and justify-evenly makes every gap equal including the edges.
How do I space links evenly in a Tailwind footer?
Put the links in a flex row and add justify-evenly; add flex-wrap if they should reflow on small screens.

Popular Layout Guides