Utilities for flexbox properties.
Flex Direction
Using flex-[row|row-reverse|col|col-revere], you can control the direction of flex items.
Flex Wrap
Using flex-[nowrap|wrap|wrap-reverse], you can control how flex items wrap.
item 1
item 2
item 3
item 4
item 5
item 6
item 7
Flex
Using flex-[none|auto|fluid], you can control how flex items wrap.
Use "flex-none" to restrict a flex item from either growing or shrinking.
none
auto w-32
w-16
auto w-64
w-32
Use "flex-auto" to enable a flex item to grow and shrink while considering its initial size.
none
fluid w-32
w-16
fluid w-64
w-32
Use "flex-fluid" to enable a flex item to grow and shrink regardless of its initial size.
You can use Arbitrary values like "flex-(1_0_auto)" as well.
Learn more about Arbitrary Styling
Flex Grow
Using flex-g-[*], you can control wheter a flex item should grow to fill any available space or not.
You can use Arbitrary values like "flex-g-(2)" as well.
Learn more about Arbitrary Styling
Flex Shrink
Using flex-s-[*], you can control wheter a flex item should shrink or not.
You can use Arbitrary values like "flex-s-(4)" as well.
Learn more about Arbitrary Styling