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

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

Control the direction of flex items:

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

Control how flex items wrap:

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

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

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

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

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)