Flex Direction Wrap Grow Shrink in TailwindCSS
? Flexbox Utilities in Tailwind CSS: Direction, Wrap, Grow, Shrink
Tailwind makes working with flexbox easy through utility classes for flex direction, wrapping, flex-grow, and flex-shrink.
1. Flex Direction
Controls the direction of flex items in a container.
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
flex-row | flex-direction: row; | Items laid out horizontally (default) |
flex-row-reverse | flex-direction: row-reverse; | Horizontal reverse order |
flex-col | flex-direction: column; | Items stacked vertically |
flex-col-reverse | flex-direction: column-reverse; | Vertical reverse order |
Example:
<div class="flex flex-col space-y-2"> <div class="bg-blue-400 p-2">Item 1</div> <div class="bg-blue-600 p-2">Item 2</div> <div class="bg-blue-800 p-2">Item 3</div></div>2. Flex Wrap
Controls whether flex items wrap to new lines when needed.
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
flex-nowrap | flex-wrap: nowrap; | No wrapping (default) |
flex-wrap | flex-wrap: wrap; | Items wrap to next line |
flex-wrap-reverse | flex-wrap: wrap-reverse; | Wrap in reverse order |
Example:
<div class="flex flex-wrap gap-4"> <div class="w-32 h-32 bg-red-400"></div> <div class="w-32 h-32 bg-red-600"></div> <div class="w-32 h-32 bg-red-800"></div> <div class="w-32 h-32 bg-red-900"></div></div>3. Flex Grow
Defines how much a flex item will grow relative to others.
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
flex-grow-0 | flex-grow: 0; | Do not grow |
flex-grow | flex-grow: 1; | Grow to fill available space |
Example:
<div class="flex"> <div class="flex-grow bg-green-400 p-4">I grow</div> <div class="w-32 bg-green-600 p-4">Fixed width</div></div>4. Flex Shrink
Controls how much a flex item shrinks when space is tight.
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
flex-shrink-0 | flex-shrink: 0; | Prevent shrinking |
flex-shrink | flex-shrink: 1; | Allow shrinking (default) |
Example:
<div class="flex w-64"> <div class="flex-shrink-0 w-40 bg-purple-400 p-4">No shrink</div> <div class="w-40 bg-purple-600 p-4">Shrinks if needed</div></div>Summary
| Property | Tailwind Classes |
|---|---|
| Flex Direction | flex-row, flex-row-reverse, flex-col, flex-col-reverse |
| Flex Wrap | flex-nowrap, flex-wrap, flex-wrap-reverse |
| Flex Grow | flex-grow-0, flex-grow |
| Flex Shrink | flex-shrink-0, flex-shrink |
Would you like me to create a complete flexbox example combining these utilities?
