Part 16: Justify-Content, Align-Items & Align-Self

Alignment in Flexbox controls how items are distributed along the main axis and cross axis.

1. Justify Content (Main Axis Distribution)

• justify-start: Items packed toward start.
• justify-end: Items packed toward end.
• justify-center: Items centered along main axis.
• justify-between: Space distributed evenly between items (outer items touch edges).
• justify-around: Space distributed around items.
• justify-evenly: Equal spacing between and around all items.

The Standard Navbar Pattern:

<nav class="flex justify-between items-center p-4 bg-white border-b">
  <span class="font-bold text-xl">Devify</span>
  <div class="flex gap-4">
    <a href="/docs">Docs</a>
    <a href="/login">Login</a>
  </div>
</nav>

2. Align Items (Cross Axis Alignment)

• items-start: Aligns to top of cross axis.
• items-center: Centers vertically in a row.
• items-end: Aligns to bottom.
• items-baseline: Aligns items along their text baseline.
• items-stretch: Stretches items to fill cross-axis height.

3. The Ultimate Centering Trick

To center an element both horizontally and vertically inside a full viewport:

<div class="min-h-screen flex items-center justify-center bg-slate-900">
  <div class="p-8 bg-white rounded-2xl shadow-2xl">
    Perfect Center
  </div>
</div>

Key Takeaways

• justify-between is the standard for header navigation layouts.
• flex items-center justify-center centers any element in 2D space.

In Part 17, we will explore Flex Wrap, Grow, Shrink & Basis!