Nearby lessons

30 of 61

🔄 Tailwind CSS - Flex (Basis, Direction, Wrap, Grow & Shrink)

📖 Overview

Flexbox utilities control how flex items grow, shrink, and are positioned within a flex container.

↔️ Flex Direction

Control the direction of flex items:

  • flex-row (default)
  • flex-row-reverse
  • flex-col
  • flex-col-reverse
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🔄 Flex Wrap

Control how flex items wrap:

  • flex-nowrap (default)
  • flex-wrap
  • flex-wrap-reverse
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

📏 Flex Grow & Shrink

Control how items grow to fill space or shrink to fit:

  • grow / grow-0
  • shrink / shrink-0
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

📐 Flex Basis

Control the initial size of a flex item:

  • Spacing scale: basis-0, basis-1, basis-4, etc.
  • Percentages: basis-1/2, basis-1/3, basis-full
  • Special: basis-auto
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🏗️ Flex (Shorthand)

Control grow, shrink, and basis in one utility:

  • flex-1 (grow & shrink, 0% basis)
  • flex-auto (grow & shrink, auto basis)
  • flex-initial (don't grow, shrink, auto basis)
  • flex-none (fixed size)
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!Tailwind CSS - Order