F flexr.dev

Layout Recipe

Build a Space-Between Navbar with Tailwind Flexbox

The classic navbar split uses 'flex justify-between items-center' on the header container. 'justify-between' pushes the first child (your logo) to the far left and the last child (your menu or CTA button) to the far right, distributing any remaining children evenly between them, while 'items-center' keeps everything vertically aligned on one line.

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:

The navbar split: justify-between and items-center

A responsive header is just one flex row. flex items-center justify-between pins the first child to the left edge and the last child to the right edge, while items-center keeps them on the same vertical line. Drop your logo in first and your nav or call-to-action last, and the split is done — no floats, no absolute positioning.

Tailwind 
<header class="flex items-center justify-between px-6 py-4">
  <a href="/" class="font-bold">Logo</a>
  <nav class="flex gap-6">
    <a href="/docs">Docs</a>
    <a href="/pricing">Pricing</a>
  </nav>
</header>
Vanilla CSS 
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Pushing a single item over with ml-auto

When you have only two elements, or you want most links grouped on one side, ml-auto is often cleaner than justify-between. It hands the leftover space to one element's left margin, pushing it — and everything after it — to the right edge.

Tailwind 
<header class="flex items-center gap-6">
  <a href="/">Logo</a>
  <a href="/login" class="ml-auto">Sign in</a>
</header>

Three or more items

With three children, justify-between pins the outer two to the edges and centers the middle one — ideal for a logo / centered nav / CTA layout. If you instead want the logo alone on the left and several links grouped on the right, wrap those links in a single <nav> so the header only sees two flex children.

Common mistakes

Forgetting items-center. Without it, the logo and nav text align to the top of the row instead of the middle.

Expecting justify-between to space grouped links. It only spreads the direct flex children; add gap to the inner <nav> to space the links themselves.

Putting the utilities on a non-flex element. justify-between does nothing until the container is flex.

Frequently asked questions

How do I put a logo on the left and menu on the right in Tailwind?
Make the header a flex row with flex items-center justify-between, then place the logo as the first child and the nav as the last child.
How do I push just one button to the right of a navbar?
Add ml-auto to that button (or to the first element that should move right). It absorbs the free space and pushes itself and following items to the right edge.
Why is my navbar logo not vertically aligned with the links?
The header is missing items-center. Without it, flex children align to the top of the row instead of the middle.

Popular Layout Guides