Now, we’re moving into one of the most important layout tools in Tailwind:

Flexbox — used to align and arrange elements easily.

Learning Flexbox in Tailwind will help you build:

• Navigation bars
• Side-by-side layouts
• Centered content
• Responsive UI blocks

Let’s get into it 👇

🎯 What is Flexbox?

Flexbox is a CSS layout module that helps arrange elements horizontally or vertically and control spacing between them.

Tailwind makes Flexbox much easier, using simple utility classes instead of writing CSS.

🧱 Basic Flex (flex)

To activate flex layout, use:

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

By default, items are placed horizontally.

🎚 Aligning Items

Horizontal alignment (justify-*)

Example:

<div class="flex justify-between">
  <span>Logo</span>
  <span>Menu</span>
</div>

Vertical alignment (items-*)

Example:

<div class="flex items-center">
  <img src="avatar.png" class="w-10 h-10" />
  <p class="ml-3">Username</p>
</div>

📐 Change Direction (flex-col)

Flex can also stack items vertically:

<div class="flex flex-col">
  <div>Item A</div>
  <div>Item B</div>
</div>

Combine flex-col with spacing for clean layouts:

<div class="flex flex-col gap-4">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

🎁 Bonus: Spacing Between Items (gap-*)

Instead of using margin between elements, Tailwind offers:

<div class="flex gap-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

This is cleaner and easier to maintain.

🧪 Mini Demo: Build a Simple Navigation Bar

<nav class="flex items-center justify-between px-6 py-4 bg-gray-900 text-white">
  <h1 class="text-xl font-bold">MyWebsite</h1>

  <ul class="flex gap-6">
    <li><a href="#" class="hover:text-gray-300">Home</a></li>
    <li><a href="#" class="hover:text-gray-300">About</a></li>
    <li><a href="#" class="hover:text-gray-300">Contact</a></li>
  </ul>
</nav>

What’s happening here:

• flex justify-between → Logo left, menu right
• items-center → Vertically align everything
• flex gap-6 → Clean spacing between menu items

✅ Modern ✅ Clean ✅ Responsive-ready

✅ Summary

Flexbox is essential for UI layout — and Tailwind makes it simple and fast.