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-reverseflex-colflex-col-reverse
🔄 Flex Wrap
Control how flex items wrap:
flex-nowrap(default)flex-wrapflex-wrap-reverse
📏 Flex Grow & Shrink
Control how items grow to fill space or shrink to fit:
grow/grow-0shrink/shrink-0
📐 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
🏗️ 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)
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!Tailwind CSS - Order