CSS Order: How it works

Summary: This article discusses the CSS Order property, a sub-property of the flexible box layout module. The CSS property order is used to arrange flex items in some cases order inside a flexible container; by default, these are listed in ascending or descending fashion according to their assigned values (ascending ordering if set as an integer and descending when it’s preceded with ).

CSS order: The working

For instance, the following code explain how CSS property order works:

#main {

 width: 400px;

 height: 150px;

 border: 1px solid #c3c3c3;

 display: -webkit-flex; /* Safari */

 display: flex;

}


#main div {

 width: 70px;

 height: 70px;

}

/* Standard syntax */

div#RedDIV  {order: 2;}

div#BlueDIV {order: 4;}

div#GreenDIV {order: 3;}

div#PinkDIV {order: 1;}

<h1>The order Property</h1>

<div id="main">

 <div style="background-color:red;" id="RedDIV"></div>

 <div style="background-color:blue;" id="BlueDIV"></div>

 <div style="background-color:green;" id="GreenDIV"></div>

 <div style="background-color:pink;" id="PinkDIV"></div>

</div>

css order

Usages:

The CSS property order is a very useful and easy-to-use CSS property that allows you to change the visual display of elements. That being said, it’s definitely not an intuitive CSS trick so we recommend that readers try out this CSS technique on their own blog or website before using it in production code. First off, the CSS property order is a simple way to tell an element which visual display it should have when multiple elements are on screen at once.

The CSS property order can be used with three different values:

Syntax:

order: integer | initial | inherit;

Integer: integer defines the order that an element should be displayed (i.e. a value of 1 would display the first element in descending priority, while a value of 0 would default).

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}

div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}
</style>
</head>
<body>

<h1>The order Property</h1>

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

Explanation: In the above code we simply create our div element. By using CSS order property our all elements changed their order.

What Happen if we use a Negative number in the value:

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: -3;}
div#myPinkDIV  {order: 1;}
</style>
</head>
<body>

<h1>The order Property</h1>

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

Explanation: In the above code, we used a negative number. This code places the third div at the beginning because a negative number is considered 0 by this property.

initial: initial will take on whatever default CSS ordering is used by your browser’s CSS engine.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: initial;}
</style>
</head>
<body>

<h1>The order Property</h1>

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

inherit: inherit will pass down to all elements that are nested inside the element with this CSS property.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}


div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: inherit;}
</style>
</head>
<body>

<h1>The order Property</h1>

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

Usually, the developer uses integer value just for ordering their elements. This is a simple process. We also suggest that you should use the integer value for ordering your elements.

Conclusion:

CSS Order has been making web design easier and more efficient for a while now, but the collapse property is an exciting new development. Going forward, we’ll be able to build on this feature in order to create unique designs that are responsive, flexible, and user-friendly. Join us as we explore what this means for you!

Also Read: HTML cookie banner

Follow us on Facebook

Leave a Comment