Part 19: Flex Order & Alignment Baseline

Sometimes the visual order of elements needs to differ from their DOM source order (e.g. placing an image above text on mobile, but to the right on desktop).

1. The order-* Utilities

• order-first: Sets order: -9999 (renders first).
• order-last: Sets order: 9999 (renders last).
• order-1 through order-12: Explicit numeric ordering.

Responsive Reordering:

<div class="flex flex-col md:flex-row items-center gap-8">
  <!-- Text content appears first in DOM for screen readers -->
  <div class="order-2 md:order-1 flex-1">
    <h1 class="text-3xl font-bold">Cutting-Edge Web App</h1>
    <p class="text-slate-600 mt-2">Build faster with Tailwind.</p>
  </div>

  <!-- Hero illustration visually appears on top on mobile, on right on desktop -->
  <div class="order-1 md:order-2 flex-1">
    <img src="/hero.svg" alt="Illustration" class="w-full" />
  </div>
</div>

2. Aligning to Baseline (items-baseline)

When displaying numbers next to currency symbols or unit labels, items-center can make text look misaligned. items-baseline aligns fonts along their text baseline:

<div class="flex items-baseline gap-1">
  <span class="text-4xl font-extrabold">$99</span>
  <span class="text-slate-500 font-medium">/month</span>
</div>

Key Takeaways

• Use order-* to change visual layout order without altering semantic HTML.
• Use items-baseline for pricing and metric cards.

In Part 20, we will build Real-World Flexbox Projects: Headers, Cards & Navbars!