Flexbox is a powerful layout model in CSS, and Tailwind CSS makes using it easier than ever with intuitive utility classes. One of the most common layout tasks is aligning items and distributing space between them — whether it’s in a navbar, card layout, or button group.
In this blog, you’ll learn how to align items and create space between them using Flexbox in Tailwind CSS — with real-world examples and best practices.
🎯 What Is Flexbox in Tailwind CSS?
Tailwind CSS provides utility classes that wrap the native CSS Flexbox API. These utilities allow you to create flexible, responsive layouts with minimal code.
To use Flexbox in Tailwind:
<div class="flex">
<!-- flex items here -->
</div>
Everything else builds on top of this.
✅ How to Align Items with Flex in Tailwind
1. items-* → Vertical Alignment (Cross Axis)
Use items-* classes to control vertical alignment of flex items inside a horizontal flex row.
| Class | Effect |
|---|---|
items-start | Align items to the top |
items-center | Center items vertically |
items-end | Align items to the bottom |
items-baseline | Align items along text baseline |
items-stretch | Default – stretch to container |
🧩 Example:
<div class="flex items-center h-20 bg-gray-100">
<div class="bg-blue-500 text-white p-2">Item 1</div>
<div class="bg-green-500 text-white p-2">Item 2</div>
</div>
📝 In this example, both items are vertically centered in the h-20 container.
2. justify-* → Horizontal Alignment (Main Axis)
Use justify-* classes to control horizontal spacing and alignment of items in a flex container.
| Class | Effect |
|---|---|
justify-start | Items align to the start (left) |
justify-center | Items align in the center |
justify-end | Items align to the end (right) |
justify-between | Equal spacing between items |
justify-around | Equal spacing around all items |
justify-evenly | Equal space between and around items |
🧩 Example:
<div class="flex justify-between bg-gray-200 p-4">
<div class="bg-red-500 text-white px-4 py-2">Left</div>
<div class="bg-blue-500 text-white px-4 py-2">Right</div>
</div>
✅ Items are spaced with justify-between: the first item is aligned left, the second is aligned right.
🧱 How to Add Space Between Flex Items
Option 1: Use space-x-* (Horizontal spacing)
<div class="flex space-x-4">
<div class="bg-purple-400 p-3">One</div>
<div class="bg-purple-600 p-3">Two</div>
</div>
space-x-4: Adds 1rem (16px) horizontal space between childrenspace-y-*is available for vertical flex directions
✅ Great for consistent spacing without extra margin classes.
Option 2: Use gap-* (Grid and Flex gap)
<div class="flex gap-6">
<div class="bg-pink-500 p-4">A</div>
<div class="bg-pink-700 p-4">B</div>
</div>
gap-*works in both row and column flex directions- Often preferred for modern layouts
🔄 Flex Direction (flex-row vs flex-col)
Tailwind defaults to flex-row, but you can change the axis with:
<div class="flex flex-col space-y-4">
<div>Top</div>
<div>Bottom</div>
</div>
flex-col: Stacks items vertically- Use
space-y-*orgap-y-*for vertical spacing
⚙️ Advanced Example: Navbar Layout
<nav class="flex justify-between items-center p-4 bg-white shadow">
<div class="text-lg font-bold">Brand</div>
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-700">Home</a></li>
<li><a href="#" class="text-gray-700">About</a></li>
<li><a href="#" class="text-gray-700">Contact</a></li>
</ul>
</nav>
justify-between: pushes logo to the left, menu to the rightitems-center: vertically aligns everythingspace-x-6: evenly spaces out the menu links
✅ Summary
| Task | Class |
|---|---|
| Make container a flexbox | flex |
| Align vertically | items-center, items-end |
| Align horizontally | justify-center, justify-between |
| Add spacing between items | space-x-*, gap-* |
| Change flex direction | flex-col, flex-row |
🚀 Final Thoughts
Tailwind CSS simplifies Flexbox layout like never before. With utility classes such as flex, items-center, justify-between, and space-x-*, you can build responsive, clean UI components quickly and efficiently.
