Javascript DOM CSS Style flexDirection Property

Introduction

Rearrange the direction of the flexible items inside the <div> element:

document.getElementById("main").style.flexDirection = "column-reverse";

Click the button to set the value of the flexDirection property to "column-reverse".

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#main {/*from   ww w.  jav  a  2 s  .  c  o  m*/
  width: 350px;
  height: 350px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: row;
}

#main div {
  width: 50px;
  height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
<button onclick="myFunction()">Test</button>
<script>
function myFunction() {
  document.getElementById("main").style.flexDirection = "column-reverse";
}
</script>

</body>
</html>

The flexDirection property sets or gets the direction of the flexible items.

If the element is not a flexible item, the flexDirection property has no effect.

Property Values

Value	Description
row	`Default`. The flexible items are displayed horizontally, as a row
row-reverse	Same as row, but in reverse order
column	The flexible items are displayed vertically, as a column
column-reverse	Same as column, but in reverse order
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The flexDirection property returns a String representing the flex-direction property of an element.

Previous Next