Sections

Flex direction

Utilities for controlling the direction of flex items.

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.

1
2
3
<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:

1
2
3
<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:

1
2
3
<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:

1
2
3
<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",
);