Justify Content & Align Items

Tailwind CSS gives you utility classes to control alignment of flex items along both the main axis and the cross axis.

1️⃣ Justify Content

Controls alignment along the main axis (row or column direction). Use these classes on the flex container:

• justify-start: align items at the start
• justify-center: center items
• justify-end: align at the end
• justify-between: even spacing between items
• justify-around: equal space around items
• justify-evenly: equal space between and around

<div class="flex justify-center space-x-2">
  <div class="bg-blue-500 text-white p-4">1</div>
  <div class="bg-green-500 text-white p-4">2</div>
  <div class="bg-red-500 text-white p-4">3</div>
</div>

2️⃣ Align Items

Controls alignment on the cross axis (perpendicular to main axis). These classes are also applied on the flex container:

• items-start: align items to top/left
• items-center: center items
• items-end: align to bottom/right
• items-stretch: stretch to fill (default)
• items-baseline: align text baselines

<div class="flex items-end space-x-2 h-32 bg-gray-100">
  <div class="bg-blue-500 text-white p-2 h-12">Short</div>
  <div class="bg-green-500 text-white p-2 h-20">Tall</div>
</div>

3️⃣ Align Self (on item)

Use self-start, self-end, self-center etc. on individual flex items to override the container’s alignment.

<div class="flex items-center h-32 bg-gray-100 space-x-2">
  <div class="self-start bg-red-500 text-white p-2">Top</div>
  <div class="bg-blue-500 text-white p-2">Center</div>
  <div class="self-end bg-green-500 text-white p-2">Bottom</div>
</div>

🧠 Summary

Use justify-* for horizontal alignment and items-* (or self-*) for vertical alignment. Flexbox makes it simple to center, distribute, or stretch elements!