Open In App

Tailwind CSS Flex Direction

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The CSS flexbox is a vital feature to develop the frontend, there are four directions available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-direction Property for fast development of front-end.

Note: To activate the flex-direction you have to include the flex class in your element before the flex-direction class.

Flex Direction:

  • flex-row
  • flex-row-reverse
  • flex-col
  • flex-col-reverse

Below is the example codes of each direction with the output:

flex-row: It arranges the row the same as the text direction. The default value of flex-direction is a row. It is used to specify that the item has a normal text direction. It makes the item follow the normal text direction in lines.

Syntax:

<element class="flex flex-row"> Contents... </element>

Example:

HTML




<!DOCTYPE html> 
  
<head
    <title>Tailwind flex-row Class</title
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
  
    <b>Tailwind CSS flex-row Class</b
  
    <div id="main" class="flex flex-row justify-evenly"
        <div class="bg-green-900 w-24 h-12">1</div
        <div class="bg-green-800 w-24 h-12">2</div
        <div class="bg-green-700 w-24 h-12">3</div
        <div class="bg-green-600 w-24 h-12">4</div
        <div class="bg-green-500 w-24 h-12">5</div
        <div class="bg-green-400 w-24 h-12">6</div
    </div
</body
  
</html>


Output:

flex-row-reverse: This class is used to follow the opposite text direction. It makes flex items in reverse order exactly the opposite of text direction as we can see in the Output.

Syntax:

<element class="flex flex-row-reverse"> Contents... </element>

Example:

HTML




<!DOCTYPE html> 
  
<head
    <title>Tailwind flex-row-reverse Class</title
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
  
    <b>Tailwind CSS flex-row-reverse Class</b
  
    <div id="main" class="flex flex-row-reverse justify-evenly"
        <div class="bg-green-900 w-24 h-12">1</div
        <div class="bg-green-800 w-24 h-12">2</div
        <div class="bg-green-700 w-24 h-12">3</div
        <div class="bg-green-600 w-24 h-12">4</div
        <div class="bg-green-500 w-24 h-12">5</div
        <div class="bg-green-400 w-24 h-12">6</div
    </div
</body
  
</html


Output:

flex-col: It arranges the row as a column same as text direction but top to bottom. It is used to specify that the item has a normal top to bottom direction. It makes the item follow the normal top to bottom direction as we can see in the output.

Syntax:

<element class="flex flex-col"> Contents... </element>

Example:

HTML




<!DOCTYPE html> 
  
<head
    <title>Tailwind flex-col Class</title
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
  
    <b>Tailwind CSS flex-col Class</b
  
    <div id="main" class="flex flex-col gap-y-2"
        <div class="bg-green-900 w-30 h-12">1</div
        <div class="bg-green-800 w-30 h-12">2</div
        <div class="bg-green-700 w-30 h-12">3</div
        <div class="bg-green-600 w-30 h-12">4</div
        <div class="bg-green-500 w-30 h-12">5</div
        <div class="bg-green-400 w-30 h-12">6</div
    </div
</body
  
</html


Output:

flex-col-reverse: It arranges the row as a column same as row-reverse bottom to top. It is used to specify that the item has a normal bottom to top direction. It makes the item follow the normal bottom to top direction as we can see in the output.

Syntax:

<element class="flex flex-col-reverse"> Contents... </element>

Example:

HTML




<!DOCTYPE html> 
  
<head
    <title>Tailwind flex-col-reverse Class</title
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
  
    <b>Tailwind CSS flex-col-reverse Class</b
  
    <div id="main" class="flex flex-col-reverse gap-y-2"
        <div class="bg-green-900 w-30 h-12">1</div
        <div class="bg-green-800 w-30 h-12">2</div
        <div class="bg-green-700 w-30 h-12">3</div
        <div class="bg-green-600 w-30 h-12">4</div
        <div class="bg-green-500 w-30 h-12">5</div
        <div class="bg-green-400 w-30 h-12">6</div
    </div
</body
  
</html


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads