Tailwind CSS·Tailwind from utilities to design system

Flexbox with utilities

Lay out rows and columns with flex, justify, items and gap.

Intermediate 12 min read Lesson 4 of 300 Challenge included

What you will be able to do

Use flex and flex-col for direction.
Use items-center and justify-between for alignment.
Use gap instead of margins between children.
Use flex-1 for the child that should absorb space.

In plain English

Tailwind exposes flexbox directly. Use flex for one-dimensional layout, items-center for cross-axis alignment and gap for spacing. grow and shrink control how children share leftover space.

flex.htmlHTML

<div class="flex items-center justify-between gap-4 rounded-lg border border-slate-200 p-4">
  <div class="flex-1">
    <p class="font-medium text-slate-900">Course progress</p>
    <p class="text-sm text-slate-500">7 of 16 lessons</p>
  </div>
  <button class="rounded-md bg-slate-900 px-3 py-2 text-sm font-medium text-white">Continue</button>
</div>

Your turn

Centre a row of badges

Easy

Create a horizontal flex row with centred items and a gap of 2.

HTML · starter

<div class="">

Check your understanding before moving on.

Knowledge checkQuestion 1

Which utility makes a flex child absorb the remaining space?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Grid with utilities

Lesson 4 of 300 · 0% of course