Flexbox

Flexbox in Tailwind

Apply flexbox with a single class:

<div class="flex items-center justify-between gap-4">
  <div>Left</div>
  <div>Right</div>
</div>

Direction:

• flex-row (default) — horizontal
• flex-col — vertical
• flex-row-reverse, flex-col-reverse

Alignment (cross axis):

• items-start, items-center, items-end, items-stretch

Justification (main axis):

• justify-start, justify-center, justify-end
• justify-between, justify-around, justify-evenly

Gap:

• gap-4 — equal gap in both directions
• gap-x-4, gap-y-4 — axis-specific

Wrap:

• flex-wrap — wrap to next line

Item utilities:

• flex-1 — grow to fill
• flex-none — don't grow or shrink
• self-center — override alignment for one item

Your Task

Create a flex row with items-center, justify-between, and gap-4 containing 3 colored boxes.