Flex Direction

Below, utility classes to apply display and flex-direction properties.

Class	Properties
.flex-row	display: flex; flex-direction: row;
.flex-row-reverse	display: flex; flex-direction: row-reverse;
.flex-column	display: flex; flex-direction: column;
.flex-column-reverse	display: flex; flex-direction: column-reverse;

Example(s)

1

2

3

<div class="flex-row gap-x-2">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

123

<div class="flex-row-reverse gap-x-2">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

123

<div class="flex-column gap-y-2">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

123

<div class="flex-column-reverse gap-y-2">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

Media Queries

flex-direction is supported by changing state on-the-fly! You can use it like this:

<div class="flex-column small:flex-row">...</div>