Direction, Wrapping, and Growth

Tailwind CSS gives you precise control over how flex items are arranged, wrapped, and scaled inside a flex container.

1️⃣ Flex Direction

Use flex-row, flex-col, and their reverse versions to set direction.

<div class="flex flex-col">
  <div class="bg-blue-500 text-white p-2">Item A</div>
  <div class="bg-green-500 text-white p-2">Item B</div>
</div>

• flex-row (default): horizontal (left to right)
• flex-row-reverse: horizontal (right to left)
• flex-col: vertical (top to bottom)
• flex-col-reverse: vertical (bottom to top)

2️⃣ Flex Wrapping

Use wrapping utilities to control whether flex items stay on one line or wrap to multiple lines.

• flex-nowrap: items stay in a single line
• flex-wrap: wrap to the next line if needed
dark:bg-gray-900
• flex-wrap-reverse: wrap in reverse direction

<div class="flex flex-wrap gap-2">
  <div class="w-40 h-20 bg-pink-500 text-white p-2">Box 1</div>
  <div class="w-40 h-20 bg-purple-500 text-white p-2">Box 2</div>
  <div class="w-40 h-20 bg-indigo-500 text-white p-2">Box 3</div>
</div>

3️⃣ Flex Grow, Shrink, and Basis

Use these utilities to control how items expand or contract relative to other items.

• flex-grow: allow an item to grow
• flex-shrink: allow an item to shrink
• basis-{size}: initial size before growing/shrinking

<div class="flex space-x-2">
  <div class="flex-grow bg-yellow-500 text-white p-4">Grow 1</div>
  <div class="flex-grow bg-orange-500 text-white p-4">Grow 2</div>
</div>

🧠 Quick Tip

Use basis-1/2 or basis-full to control item size with great flexibility!