Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

Tailwind Flexbox

Flex layouts with utility classes.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯
  • flex turns on Flexbox; flex-col for a column.
  • justify-between, justify-center: main axis.
  • items-center, items-start: cross axis.
  • gap-4, flex-wrap, flex-1, shrink-0

Key Takeaways: Tailwind Flexbox

Mastering Tailwind Flexbox helps you write clean and reliable Tailwind CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Tailwind Flexbox Code Example

Tailwind CSS 
<script src="https://cdn.tailwindcss.com"></script>

<nav class="flex items-center justify-between px-6 py-4 bg-slate-900 text-white">
  <span class="font-bold">Logo</span>
  <div class="flex gap-4 text-sm">
    <a href="#">Home</a><a href="#">Blog</a><a href="#">Contact</a>
  </div>
</nav>
Free sign-in required · Google login available

Tailwind Flexbox Practice Exercises

Check what you learned in “Tailwind Flexbox”.

/ 3 solved
Fill in the blank

Vertically centre the flex items.

<div class="flex ">...</div>
✓ Correct! Not quite. Try again.
Multiple choice

Which class puts space between flex items with equal gaps?

✓ Correct! Not quite. Try again.
Code challenge

Make the container flex with justify-between and items-center.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
Tailwind Borders & Shadows
Next ❯
Tailwind Grid

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services