HTML | DOM Style flexDirection Property

The DOM Style flexDirection property is used to set or return the main-axis direction of the flexible items.

Syntax:

It returns the flexDirection Property

object.style.flexDirection

It used to set the flexDirection Property

object.style.flexDirection = "row | row-reverse | column | 
column-reverse | initial | inherit"

Return Values: It returns a String, represents the flex-direction property of an element

Property Values:

Value	Description
row	This is used to display the flexible items horizontally as a row.
row-reverse	This is same as a row, but in reverse order.
column	This is used to display the flexible items vertically, as a column.
column-reverse	This is same as a column, but in reverse order.
initial	This is used to set this property to its default value.
inherit	This inherits the property from its parent.

Example-1: Using the row value.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style flexDirection property
    </title>
    <style>
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
        }
        
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style flexDirection
    </b>

    <div class="main">
        <div style="background-color:lightgreen;">
          The
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          For
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          Portal
        </div>
    </div>

    <button onclick="changeFlexDirection()">
        Change flexDirection
    </button>

    <script>
        function changeFlexDirection() {
            document.querySelector(
                '.main').style.flexDirection = "row";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:

row-before

After clicking the button:

row-after

Example-2: Using the row-reverse value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style flexDirection property
    </title>

    <style>
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
        }
        
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      DOM Style flexDirection
  </b>

    <div class="main">
        <div style="background-color:lightgreen;">
          The
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          For
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          Portal
        </div>
    </div>

    <button onclick="changeFlexDirection()">
        Change flexDirection
    </button>

    <script>
        function changeFlexDirection() {
            document.querySelector(
                    '.main').style.flexDirection =
                "row-reverse";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:

row-reverse-before

After clicking the button:

row-reverse-after

Example-3: Using the column value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style flexDirection property
    </title>

    <style>
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
        }
        
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style flexDirection</b>

    <div class="main">
        <div style="background-color:lightgreen;">
          The
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          For
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          Portal
        </div>
    </div>

    <button onclick="changeFlexDirection()">
        Change flexDirection
    </button>

    <script>
        function changeFlexDirection() {
            document.querySelector(
                '.main').style.flexDirection = "column";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:

column-before

After clicking the button:

column-after

Example-4: Using the column-reverse value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style flexDirection property
    </title>

    <style>
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
        }
        
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      DOM Style flexDirection
  </b>

    <div class="main">
        <div style="background-color:lightgreen;">
          The
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          For
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          Portal
        </div>
    </div>

    <button onclick="changeFlexDirection()">
        Change flexDirection
    </button>

    <script>
        function changeFlexDirection() {
            document.querySelector(
                    '.main').style.flexDirection =
                "column-reverse";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:

column-reverse-before

After clicking the button:

column-reverse-after

Example-5: Using the initial value.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style flexDirection property
    </title>

    <style>
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
        }
        
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      DOM Style flexDirection
  </b>

    <div class="main">
        <div style="background-color:lightgreen;">
          The
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          For
        </div>

        <div style="background-color:green;">
          Geeks
        </div>

        <div style="background-color:lightgreen;">
          Portal
        </div>
    </div>

    <button onclick="changeFlexDirection()">
        Change flexDirection
    </button>

    <script>
        function changeFlexDirection() {
            document.querySelector(
                    '.main').style.flexDirection =
                "initial";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:

initial-before

After clicking the button:

initial-after

Example-6: Using the inherit value.

html

<!DOCTYPE html>
<html>
<head>
<title>
  DOM Style flexDirection property
  </title>


    <style>
        #parent {
            flex-direction: column-reverse;
        }
        
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
        }
        
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    </style>

</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      DOM Style flexDirection
  </b>
    <div id="parent">
        <div class="main">
            <div style=
                 "background-color:lightgreen;">The</div>
          
            <div style=
                 "background-color:green;">Geeks</div>
          
            <div style=
                 "background-color:lightgreen;">For</div>
          
            <div style=
                 "background-color:green;">Geeks</div>
          
            <div style=
                 "background-color:lightgreen;">Portal</div>
          
        </div>
    </div>
    <button onclick="changeFlexDirection()">
      Change flexDirection
  </button>

    <script>
        function changeFlexDirection() {
            document.querySelector(
              '.main').style.flexDirection =
              "inherit";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:

inherit-before

After clicking the button:

inherit-after

Supported Browsers: The browser supported by flexDirection property are listed below:

Google Chrome 29 and above
Edge 12 and above
Internet Explorer 11.0 and above
Firefox 81 and above
Opera 12.1 and above
Apple Safari 9 and above

HTML | DOM Style flexDirection Property

Explore