iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Flexbox

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind’s flex utilities expose every Flexbox property as a class. flex turns the container on; flex-row / flex-col set direction; justify-* aligns the main axis; items-* aligns the cross axis.

Real flex layouts

EXAMPLE
<!-- Header bar — title on the left, actions on the right -->
<header class="flex items-center justify-between px-6 py-4 border-b">
    <h1 class="text-lg font-semibold">Dashboard</h1>
    <div class="flex items-center gap-3">
        <button class="px-3 py-1.5 text-sm rounded border">Cancel</button>
        <button class="px-3 py-1.5 text-sm rounded bg-emerald-500 text-white">Save</button>
    </div>
</header>

<!-- Centred card on a hero -->
<section class="min-h-screen flex items-center justify-center bg-slate-50">
    <article class="w-full max-w-md p-8 bg-white rounded-xl shadow">
        <h1 class="text-2xl">Sign in</h1>
        …
    </article>
</section>

<!-- Sidebar + content (uses flex on the page) -->
<div class="flex min-h-screen">
    <aside class="w-64 shrink-0 bg-slate-900 text-white p-6">Sidebar</aside>
    <main class="flex-1 p-8">Content fills the rest</main>
</div>

<!-- Sticky footer pattern -->
<div class="min-h-screen flex flex-col">
    <Header />
    <main class="flex-1">…</main>     <!-- grows to push the footer down -->
    <Footer />
</div>

<!-- Wrap when out of space; consistent gaps -->
<ul class="flex flex-wrap gap-2">
    <li class="px-3 py-1 bg-slate-100 rounded-full">tag-1</li>
    <li class="px-3 py-1 bg-slate-100 rounded-full">tag-2</li>
    <li class="px-3 py-1 bg-slate-100 rounded-full">tag-3</li>
</ul>

<!-- Equal-width columns -->
<div class="flex gap-4">
    <div class="flex-1 bg-slate-100 p-4">A</div>
    <div class="flex-1 bg-slate-100 p-4">B</div>
    <div class="flex-1 bg-slate-100 p-4">C</div>
</div>

Why it matters

gap on a flex container is the modern default for spacing children. It kills the “every-other-margin” and “last child no margin” CSS dance forever.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="flex items-center justify-between gap-4">…</div>
Try it Yourself »

Exercise

Make a row layout center the items vertically.

class="flex -center"

Discussion

Loading…