Justify And Align Items in TailwindCSS
? Justify Content & Align Items in Tailwind CSS Flexbox
Tailwind provides utilities to control how flex items are aligned horizontally (justify-content) and vertically (align-items) within a flex container.
1. Justify Content (Horizontal Alignment)
Controls how flex items are distributed along the main axis (usually horizontal).
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
justify-start | justify-content: flex-start; | Items aligned to the start (left) |
justify-end | justify-content: flex-end; | Items aligned to the end (right) |
justify-center | justify-content: center; | Items centered horizontally |
justify-between | justify-content: space-between; | Items spread out, first and last at edges |
justify-around | justify-content: space-around; | Items evenly spaced with equal space around |
justify-evenly | justify-content: space-evenly; | Items evenly distributed with equal spacing |
Example:
<div class="flex justify-between bg-gray-100 p-4"> <div class="bg-blue-400 p-2">Item 1</div> <div class="bg-blue-600 p-2">Item 2</div> <div class="bg-blue-800 p-2">Item 3</div></div>2. Align Items (Vertical Alignment)
Controls how flex items align along the cross axis (usually vertical).
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
items-start | align-items: flex-start; | Align items to the top |
items-end | align-items: flex-end; | Align items to the bottom |
items-center | align-items: center; | Align items vertically centered |
items-baseline | align-items: baseline; | Align items by text baseline |
items-stretch | align-items: stretch; | Stretch items to fill container |
Example:
<div class="flex items-center h-24 bg-gray-200 p-4"> <div class="bg-red-400 p-4">Aligned center vertically</div></div>Combining Justify and Align
<div class="flex justify-center items-center h-32 bg-green-100"> <div class="bg-green-500 p-6">Centered both horizontally & vertically</div></div>Summary Table
| Purpose | Tailwind Classes |
|---|---|
| Justify Content | justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly |
| Align Items | items-start, items-end, items-center, items-baseline, items-stretch |
Would you like me to create a demo flexbox layout with different justify and align combinations?
