order Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:order

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

Description

The order property sets the order of a flexible item relative to the rest of the flexible items.

Property Values

Value Description
number Default value 0. Specifies the order for the flexible item
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 0
Return Value: A String, representing the order property of an element
CSS VersionCSS3

Set the order of the flexible items:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {/*w  ww .j a v  a 2s. c  o  m*/
    width: 400px;
    height: 150px;
    border: 1px solid #000000;
    display: flex;
}

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

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:red;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

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

<script>
function myFunction() {
    document.getElementById("myRedDIV").style.order = "4";
    document.getElementById("myBlueDIV").style.order = "3";
    document.getElementById("myGreenDIV").style.order = "1";
    document.getElementById("myPinkDIV").style.order = "2";
}
</script>
</body>
</html>

Related Tutorials