CSS order Property
CSS order Property
CSS order property specifies the order to lay out an item in a flex or grid container.
Note: Flex items in a container are sorted by ascending order value and then by their source code order.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#parent{
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid #8c8c8c;
}
#parent > div{
border: 1px solid #267326;
text-align: center;
line-height: 4;
width: 70px;
height: 70px;
}
#parent > div:nth-child(1){
/*Put 1st element to 2nd place*/
order: 2;
}
#parent > div:nth-child(2){
/*Put 2nd element to 3rd place*/
order: 3;
}
#parent > div:nth-child(3){
/*Put 3rd element to 4th place*/
order: 4;
}
#parent > div:nth-child(4){
/*Put 4th element to 1st place*/
order: 1;
}
</style>
</head>
<body>
<h1>CSS order Property</h1>
<div id="parent">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
</body>
</html>
Syntax
Using CSS
element{
order: 2;
}
Using Javascript
object.style.order="2";
Animatable
Yes, order property is animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS order property is 0.
Property Value
The following table provides a list of values for CSS order property.
| Value | Explanation |
|---|
| Number | Specifies the order for the child element. Negative values are also accepted |
Using JavaScript
In the following example, we will demonstrate how to set the CSS order property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#parent{
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid #8c8c8c;
}
#parent > div{
border: 1px solid #267326;
text-align: center;
line-height: 4;
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h1>CSS order Property</h1>
<div id="parent">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("parent").firstElementChild;
function myFunction(){
x.style.order = "1";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
