Tailwind CSS Flex Direction

Flex Direction is a CSS property used to define the direction of elements in a flex container. In Tailwind CSS, flex-direction classes are available to set flex-direction for an element.

Syntax

The syntax for Tailwind CSS flex-direction classes is as follows:

<div class="flex flex-{direction}"></div>

Here, {direction} can be replaced with any of the following values:

• row (default)
• row-reverse
• col
• col-reverse

Example

Let's see an example of how we can use flex-direction classes in Tailwind CSS.

<div class="flex flex-col">
  <div class="p-2 bg-red-400">Box 1</div>
  <div class="p-2 bg-blue-400">Box 2</div>
  <div class="p-2 bg-green-400">Box 3</div>
</div>

Output

The above code will display 3 boxes stacked vertically one after another.

Explanation

In the above example, we have used flex class to declare the element as a flex container. Then, we have used flex-col class to set the direction of flex items as column. This will display 3 boxes stacked vertically one after another.

Use

flex-direction classes can be used to set the direction of flex items in a flex container. By default, the flex-direction is set to row. It can be set to any of the following values:

• row: displays flex items in the horizontal direction (left to right).
• row-reverse: displays flex items in the horizontal direction, but in reverse order (right to left).
• col: displays flex items in the vertical direction (top to bottom).
• col-reverse: displays flex items in the vertical direction, but in reverse order (bottom to top).

Important Points

• Flex direction is a CSS property used to define the direction of elements in a flex container.
• In Tailwind CSS, flex-direction classes are available to set flex-direction for an element.
• By default, the flex-direction is set to row.
• flex-direction classes can be used to set the direction of flex items in a flex container.

Summary

In this tutorial, we learned about Tailwind CSS flex-direction classes used to set the direction of elements in a flex container. We also learned about their syntax, examples, output, explanation, use, important points, and summary.