CSS Order Property
CSS order property is used to change the order of an element. Let’s see with an example:
HTML:
<div id="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
<div class="item item-4">Item 4</div>
<div class="item item-5">Item 5</div>
</div>
CSS:
#container{
border: 2px black solid;
display: flex;
width: fit-content;
}
.item{
width: 50px;
height: 25px;
padding: 1px;
}
.item-1{
background-color: red;
}
.item-2{
background-color: green;
}
.item-3{
background-color: orange;
order: 1;
}
.item-4{
background-color: darkviolet;
}
.item-5{
background-color: yellow;
order: 2;
}
Output:
Step to Learn Order property
-
- In our example, we have five items and you can see they are laid out item 1 through 5 which is the order in which they appear in the code.
- To mix up the order, we need to use the order property. If we set ‘order’ to ‘1’ in the “item-3” div class in CSS, see the below output the item-3 is pushed all the way to the end. That is because all items by default have an order of 0. So, order 1 is greater than the order of all other items and hence appears at the end.
.item-3{ background-color: orange; order: 1; }
- Now, If we change the order of item 5 to 2, see the output below ‘item-5’ is pushed to the end. So, order 0 items come first then order 1 and 2 to paused end.
.item-5{ background-color: yellow; order: 2;}
If we specify the same order number for more than one item, items are laid out in the order in which they appear in the source code.