Tailwind CSS - Flex Direction

Previous
Quiz
Next

Tailwind CSS Flex Direction is a utility class that is used to set the direction of flex items within a flex container.

Tailwind CSS Flex Direction Classes

The following is the list of Tailwind CSS Flex Direction classes, which are utilities that effectively set the initial size of a flex item.

Class CSS Properties
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;

Functionality of Tailwind CSS Flex Direction

  • flex-row: This class replaces CSS flex-direction: row; property. This class enables flex items to be placed in a row from left to right.
  • flex-row-reverse: This class replaces the CSS flex-direction: row-reverse; property. This class enables flex items to be placed in a reverse direction from right to left.
  • flex-col: This class replaces CSS flex-direction: column; property. This class enables flex items to be placed vertically.
  • flex-col-reverse: This class replaces CSS flex-direction: column-reverse; property. This class enables flex items to be placed vertically in the opposite direction.

    • Tailwind CSS Flex Direction Class Examples

    The following examples will illustrate the Tailwind CSS Flex Direction class utility.

    Horizontal Flex Items as Row

    The below example illustrates the use of flex-row class.

    Example

    <!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Row
    </h2>
    <div class="inline-flex flex-row">
        <div class="bg-green-500 
                    text-4xl p-3 mr-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mr-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mr-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mr-1.5">four</div>
    </div>
</body> 
</html>

    Horizontal Flex Items as Reverse Row

    The below example illustrates the use of flex-row-reverse class.

    Example

    <!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Row Reverse
    </h2>
    <div class="inline-flex flex-row-reverse">
        <div class="bg-green-500 
                    text-4xl p-3 mr-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mr-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mr-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mr-1.5">four</div>
    </div>
</body> 

</html>

    Vertical Flex Items as Column

    The below example illustrates the use of flex-col class.

    Example

    <!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Col Class
    </h2>
    <div class="inline-flex flex-col">
        <div class="bg-green-500 
                    text-4xl p-3 mb-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mb-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mb-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mb-1.5">four</div>
    </div>
</body>

</html>

    Vertical Flex Items as Reverse Column

    The below example illustrates the use of flex-col-reverse class.

    Example

    <!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Col Reverse Class
    </h2>
    <div class="inline-flex flex-col-reverse">
        <div class="bg-green-500 
                    text-4xl p-3 mb-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mb-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mb-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mb-1.5">four</div>
    </div>
</body>

</html>
    Print Page
    Previous
    Next