Flex Direction

Utilities for controlling the flex direction of a container.

Class Name	CSS Equivalent
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-column	flex-direction: column;
flex-column-reverse	flex-direction: column-reverse;

Flex Row

The .flex-row class sets the flex-direction property to row, making the container's items flow horizontally.

<div class="flex flex-row gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Flex Row Reverse

The .flex-row-reverse class sets the flex-direction property to row-reverse, making the container's items flow horizontally in reverse order.

<div class="flex flex-row-reverse gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Flex Column

The .flex-column class sets the flex-direction property to column, making the container's items flow vertically.

<div class="flex flex-column gap-m m-i-auto">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Flex Column Reverse

The .flex-column-reverse class sets the flex-direction property to column-reverse, making the container's items flow vertically in reverse order.

<div class="flex flex-column-reverse gap-m m-i-auto">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3