flexDirection Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:flexDirection

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. flexDirection

Description

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

Property Values

Value Description
rowDefault value. The flexible items are displayed horizontally, as a row
row-reverseSame 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
initialSets this property to its default value.
inheritInherits this property from its parent element.

Technical Details

Item Value
Default Value: row
Return Value: A String, representing the flex-direction property of an element
CSS VersionCSS3

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from w ww.j  a v  a 2s . c om
    width: 350px;
    height: 350px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row; /* Safari 6.1+ */
    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:red;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:blue;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("main").style.WebkitFlexDirection = "column-reverse"; // Safari 6.1+
    document.getElementById("main").style.flexDirection = "column-reverse";
}
</script>

</body>
</html>

Related Tutorials