Tailwind Flex direction

The tailwind flex direction utility class allows you to control the direction in which flex items are laid out within a flex container. It provides a set of classes that enable you to easily specify the flex direction, allowing you to create flexible and responsive layouts.

Setting Tailwind Flex Direction

To set the tailwind flex direction of a flex container, you can use the flex class in combination with one of the following classes:

• flex-row: This sets the flex direction to horizontal, with flex items laid out in a row from left to right.

• flex-row-reverse: This sets the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.

• flex-col: This sets the flex direction to vertical, with flex items laid out in a column from top to bottom.

• flex-col-reverse: This sets the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top.

Tailwind Flex Row

Tailwind flex row class is used to set the flex direction to horizontal, with flex items laid out in a row from left to right.

<div class="flex flex-row">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind Flex-Row-Reverse

Tailwind flex row reverse class is used to set the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.

<div class="flex flex-row-reverse">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind Flex-Col

Tailwind flex col class is used to set the flex direction to vertical, with flex items laid out in a column from top to bottom

<div class="flex flex-col">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind Flex-Col-Reverse

Tailwind flex col reverse class is used to set the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top

<div class="flex flex-col-reverse">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

That's it! You now have a good understanding of how to use the flex direction utility classes in Tailwind CSS to control the direction in which flex items are laid out within a flex container.

Tailwind Flex Direction Class Table

Windframe Tailwind blocks

footer