Flexbox with Tailwind

Most rows, toolbars and centred stacks you will ever build are flex containers, and Tailwind gives every Flexbox property a short, readable name. This chapter of the Tailwind CSS for Beginners series maps the container and item utilities onto the two axes you met in Flexbox: The Complete Guide, then builds a navigation bar and the famous "centre anything" recipe.

Turning on flex layout

One class starts everything: flex makes an element a row-direction flex container, and inline-flex makes it shrink-wrap on the page instead of spanning the width. Its children become flex items that no longer behave like ordinary blocks — they sit side by side, stretch to the container's height, and ignore vertical margin collapsing. Add flex-col when you want the column direction instead, and flex-wrap when a crowded row should break onto a new line rather than squeeze its contents into unreadable slivers. Because these are the same properties you studied as plain CSS, the utility names translate almost word for word.

Container utilities

Remember which axis is which: in a row container justify-* distributes along the horizontal main axis, while items-* works on the vertical cross axis. Swapping directions with flex-col swaps the roles, which is the single most common source of confusion when a class "does nothing". When a container needs its children centred as a group and each child's text centred as well, both groups combine: justify-center on the parent and text-center on the child.

Item utilities: growing, shrinking, ordering

Individual children get their own set of controls, and three of them do most of the work:

• flex-1 — grow, shrink and start from a zero basis, so siblings share space equally. It is the shorthand for flex: 1 1 0%.
• grow and shrink-0 — expand to fill, or refuse to shrink (icons and badges that must keep their size).
• basis-1/3 — the starting width before free space is distributed, useful when equal columns are not the goal.
• self-start, self-end, self-stretch — override the container's align-items for one child only.
• order-* — visually rearrange items, with order-first and order-last as shortcuts.

Building a navigation bar

The classic pattern combines a brand, a set of links and an action button, all in one row:

<nav class="flex items-center justify-between gap-6 bg-slate-900 px-6 py-4 text-white">
  <a href="/" class="text-lg font-bold">Scriptly</a>
  <ul class="flex items-center gap-5 text-sm text-slate-300">
    <li><a href="/tutorials" class="hover:text-white">Tutorials</a></li>
    <li><a href="/pricing" class="hover:text-white">Pricing</a></li>
  </ul>
  <button class="ml-auto rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold hover:bg-indigo-400">Sign in</button>
</nav>

Expected output:

A dark horizontal bar: the brand name on the far left, two small grey
links next to it, and an indigo sign-in button pushed to the far
right. Everything shares one baseline, and the rows never overlap.

Two details make this robust. gap-6 keeps spacing even without touching each child's margins, and ml-auto on the button absorbs the leftover space so the button lands at the end even if the middle group changes size. On a phone you would hide the link list and swap in a menu button — the flex row itself needs no other change.

Centring, and the other recipes you will reuse

Flexbox answers three questions that come up in every project. Each recipe below is a complete, memorisable answer:

<!-- centre a child both ways -->
<div class="flex items-center justify-center">Perfectly centred</div>

<!-- a column of items with even gaps -->
<div class="flex flex-col gap-4 grow">Stacked with air</div>

<!-- text left, badge right, inside one line -->
<div class="flex items-baseline justify-between gap-3">
  <span class="font-semibold">Total</span>
  <span class="text-slate-500">$42.00</span>
</div>

Expected output:

First a short phrase floating in the exact centre of its box, then a
column of items with identical spacing, and finally a row where the
label sits left and the price sits right.

Flexbox is a one-dimensional tool: it shines when you are laying out a single row or column, and every item's position depends only on its neighbours. The moment you need rows and columns together — a grid of equal-height panels, a dashboard with a spanning chart — reach for grid instead. That contrast is the next chapter.

Common mistakes

• Wrong axis — justify-center in a column container centres horizontally, not vertically; check flex-col first.
• Percentages on the wrong axis — w-1/2 on a flex row child behaves oddly once padding is added; flex-1 is usually what you meant.
• Missing min-w-0 — long text inside flex-1 will not shrink without it, blowing the row sideways.
• Using order for reading flow — it changes visuals only; keyboard and screen-reader order stay as written in the HTML.
• Wrapping with margins — gap on the container replaces fiddly space-x- hacks and survives reordering.

Practice checklist

1. Rebuild the navigation bar and swap justify-between for justify-center to feel the difference.
2. Make a card footer with justify-between holding a price on the left and a button on the right.
3. Create a centred hero using only flex items-center justify-center min-h-screen.
4. Add flex-wrap to a row of tags and resize the window until they stack.
5. Remove min-w-0 from a flex-1 child containing a long URL and observe the overflow.

One row handled — now for rows and columns together: Grid with Tailwind.