| Class | Properties |
|---|---|
.flex-row | flex-direction: row; |
.flex-row-reverse | flex-direction: row-reverse; |
.flex-column | flex-direction: column; |
.flex-column-reverse | flex-direction: column-reverse; |
Row
Use .flex-row to position flex items horizontally in the same direction as text.
<div class="flex flex-row bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Row reversed
Use .flex-row-reverse to position flex items horizontally in the opposite direction:
<div class="flex flex-row-reverse bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Column
Use .flex-column to position flex items vertically:
<div class="flex flex-column bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Column reversed
Use .flex-column-reverse to position flex items vertically in the opposite direction:
<div class="flex flex-column-reverse bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Variants
By default, only responsive variants are generated for flex direction utilities.
Responsive
To control the flex direction of an element at a specific breakpoint, add a {screen}: prefix to any existing flex direction utility.
For example, use .md:flex-column to apply the flex-column utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:flex-column, add "flex-direction" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"flex-direction",
);