Tailwind Justify Content

What Does justify-content Control?

justify-* utilities map to the CSS justify-content property, controlling how extra space is distributed among flex or grid items along the main axis, horizontal by default in a flex-row container.

This is different from items-*, which aligns items along the cross axis. Justify and items utilities are almost always used together to fully control alignment in a flex container.

<nav class="flex items-center justify-between p-4">
  <span class="font-bold">Logo</span>
  <div class="flex gap-4">
    <a href="/">Home</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

justify-between pushes the logo to one end and the links to the other, with all remaining space distributed between them.

Justify Content Syntax

class="justify-start | justify-end | justify-center"
class="justify-between | justify-around | justify-evenly"

• justify-start/justify-end push items to the beginning or end of the main axis.
• justify-center centers all items together along the main axis.
• justify-between places equal space between items, with no space at the outer edges.
• justify-evenly distributes fully equal space, including at the outer edges.

Justify Content Cheatsheet

Every justify-content value and how it distributes space.

The Classic Navbar Pattern

justify-between combined with items-center is the single most common Tailwind pattern for headers and navbars: it spreads a logo and navigation links to opposite ends while keeping them vertically aligned.

<header class="flex items-center justify-between px-6 py-4">
  <a href="/" class="text-xl font-bold">Brand</a>
  <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">Sign In</button>
</header>

between vs around vs evenly

These three utilities are easy to confuse. space-between has no space at the outer edges. space-around gives each item equal space on both sides, which visually doubles the space between items compared to the edges. space-evenly makes every gap, including the edges, exactly equal.

Centering a Single Item

To center one flex item both horizontally and vertically, combine justify-center (main axis) with items-center (cross axis) on the parent container.

<div class="flex h-64 items-center justify-center bg-slate-50">
  <p class="text-lg font-medium">Perfectly centered</p>
</div>

Common Mistakes

• Applying justify-* without flex (or grid) on the same element; it has no effect on regular block elements.
• Confusing justify-* (main axis) with items-* (cross axis), especially after changing flex-direction.
• Choosing justify-around when justify-evenly was the intended, perfectly equal spacing.
• Using justify-between with only one child, which has no visible effect since there's nothing to distribute space between.
• Forgetting that in a flex-col container, justify-* controls vertical, not horizontal, alignment.

Key Takeaways

• justify-* utilities control alignment and space distribution along the main axis of a flex or grid container.
• justify-between, justify-around, and justify-evenly each distribute space differently at the edges versus between items.
• justify-between items-center is the standard combination for navbar-style layouts.
• The main axis direction depends on flex-direction, so justify's visual effect can be horizontal or vertical.
• Justify utilities require a flex or grid display value on the same element to take effect.