Introduction to CSS Order
In this article, we are discussing an order property of CSS. This order property is a sub-property of the flexible box layout module. This property is used to arrange the flex items in some order inside the flexible container. These flex items are arranged in the element in either ascending or descending order of the order value of the flex items. So this order property can be used to change the ordering in the source document. By default, these flex items are listed in the same order as in the source document. In general, the order property is used to arrange the flex items in order relative to other flex items in the same container.
How does CSS Order work?
In CSS, the order property is the property to specify the order of flexes items to display in either ascending or descending order in the element layout within the container. Order property is only used to order visual elements and this will not affect the logical tab order, therefore it must not be used on non-visual media such as voice or speech medium. Hence this property creates the disconnection between DOM and visual presentation of element content which in turn will affect the navigation to become low. This order property is supported in a few major browsers like Firefox, Google Chrome, Internet Explorer, Apple Safari, Opera, etc.
Let us see the syntax and example below. This property is not valid if there is no flex item in the element.
Syntax:
order: integer | initial | inherit;- integer: this value is specified in integer value that is in number. By default, the value here is taken as 0 if no value is specified.
- initial: this is used to set the value as the default value.
- inherit: this value is taken from the computed value of its parent element as inherited value.
Generally, the users prefer the order property value as an integer value which is easy to specify the order of the items accordingly. As integer value can be both positive and negative values the order property takes both these values to arrange the flex items in the element layout.
Examples to Implement CSS Order
Let us see a general example of order property that is used in CSS which uses both positive and negative order property values. Below are the examples:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
<style>
#main {
width: 500px;
height: 200px;
border: 7px solid black;
display: flex;
flex-wrap: nowrap;
margin-left:80px;
margin-bottom:80px;
}
#main div {
width: 250px;
height: 100px;
}
h1 {
color:#007700;
font-size:53px;
margin-left:70px;
margin-top:70px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
div#red1{order:-2;}
div#yellow1{order:0;}
div#green1{order:-3;}
div#pink1{oreder:1;}
div#orange1{orde4r:2;}
div#blue1{order:-1;}
div{
color:white;}
}
</style>
</head>
<body>
<center>
<h1>CSS Order property</h1>
<div id="main">
<div style="background-color:red;"id="red1">
red</div>
<div style="background-color:yellow;"id="yellow1">
yellow</div>
<div style="background-color:green;"id="green1">
green</div>
<div style="background-color:pink;"id="pink1">
pink</div>
<div style="background-color:orange;"id="orange1">
orange</div>
<div style="background-color:blue;"id="blue1">
blue</div>
</div>
</center>
</body>
</html>Output:
Explanation: In the above program, we can see that we have specified both positive and negative numbers. Where we can see the negative numbers are displayed first then the color with zero value and then positive values are displayed.
Example #2
Now let us see an example for the above order property value.
9 Online Courses | 9 Hands-on Projects| 61+ Hours| Verifiable Certificate of Completion
4.5
View Course
order: integer;This property value is used to specify the order value in numbers which can be either a positive number or negative number, where this property gives numbers to each item in the container.
Syntax:
order: number;Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
<style>
#main {
width: 500px;
height: 200px;
border: 7px solid black;
display: flex;
flex-wrap: nowrap;
margin-left:80px;
margin-bottom:80px;
}
#main div {
width: 250px;
height: 100px;
}
h1 {
color:#007700;
font-size:53px;
margin-left:70px;
margin-top:70px;
}
div#red1{order:6;}
div#yellow1{order:4;}
div#green1{order:3;}
div#pink1{oreder:1`;}
div#orange1{orde4r:2;}
div#blue1{order:5;}
div{
color:white;}
}
</style>
</head>
<body>
<center>
<h1>CSS Order property</h1>
<div id="main">
<div style="background-color:red;"id="red1">
red</div>
<div style="background-color:yellow;"id="yellow1">
yellow</div>
<div style="background-color:green;"id="green1">
green</div>
<div style="background-color:pink;"id="pink1">
pink</div>
<div style="background-color:orange;"id="orange1">
orange</div>
<div style="background-color:blue;"id="blue1">
blue</div>
</div>
</center>
</body>
</html>Output:
Explanation: In the above program, we can see that we have used integer property value to specify the order for the colors. As the above program, we have 6 different colors with a different arrangement where we can see we have given pink as “1”, orange as “2”, green as “3”, yellow as “4”, blue as “5”, and red as “6”.
order: initial; This property value is used when we want to set the order values as the default values. This property can be demonstrated as below.
Syntax:
order: initial;Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
<style>
#main {
width: 500px;
height: 200px;
border: 7px solid black;
display: flex;
flex-wrap: nowrap;
margin-left:80px;
margin-bottom:80px;
}
#main div {
width: 250px;
height: 100px;
}
h1 {
color:#007700;
font-size:53px;
margin-left:70px;
margin-top:70px;
}
div{
order: initial;
color:white;}
}
</style>
</head>
<body>
<center>
<h1>CSS Order property</h1>
<div id="main">
<div style="background-color:red;"id="red1">
red</div>
<div style="background-color:yellow;"id="yellow1">
yellow</div>
<div style="background-color:green;"id="green1">
green</div>
<div style="background-color:pink;"id="pink1">
pink</div>
<div style="background-color:orange;"id="orange1">
orange</div>
<div style="background-color:blue;"id="blue1">
blue</div>
</div>
</center>
</body>
</html>Output:
Explanation: In the above program, we can see that the order property is specified as initial and the font color as white. This property value displays the order of color as we first tried with which color as the first color. So the order at the initial stage was given as for red as “1”, yellow as “2”, green as “3”, pink as “4”, and orange as “5” and, blue as “6”. In this way the color items in the element layout.
Conclusion
In this article, we conclude that the order property of CSS is used to arrange the flex items in the order. This property is a sub-property of the flexible box layout. This property has different values like integer value which can have both positive and negative values, an initial value which takes the value which was default value, and inherits values are the values that take the values from the parent element. The default value for order property is zero.
Recommended Articles
This is a guide to CSS Order. Here we discuss an introduction to CSS Order, syntax, how it work with examples to implement. You can also go through our other related articles to learn more –
