Skip to content
Related Articles

Related Articles

HTML | DOM Style flexDirection Property
  • Difficulty Level : Basic
  • Last Updated : 31 Jul, 2019

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"

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.




<!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.




<!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.




<!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.




<!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.




<!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.




<!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
  • Internet Explorer 11.0
  • Firefox
  • Opera
  • Apple Safari 6.1
My Personal Notes arrow_drop_up
Recommended Articles
Page :