Skip to content
Related Articles

Related Articles

HTML | DOM Style flexDirection Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 09 Aug, 2022

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:

ValueDescription
rowThis is used to display the flexible items horizontally as a row.
row-reverseThis is same as a row, but in reverse order.
columnThis is used to display the flexible items vertically, as a column.
column-reverseThis is same as a column, but in reverse order.
initialThis is used to set this property to its default value.
inheritThis 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!