This CSS attribute determines the sequence of the flex item within the flex container or grid. Its primary function is to arrange the flex items in a specific order. It's important to understand that this property will not have any effect if the element is not flexible.
The elements will be shown in ascending order according to their order values. In cases where two elements share the same order value, they will be arranged based on their order of appearance as specified in the source code.
The order attribute adjusts the display sequence of flex items on the screen. A lower order number positions an item at the beginning, while a higher number pushes it further down the line. This property specifically rearranges the visual presentation, not the tab or logical sequence. It is crucial to avoid applying it to non-visual mediums like speech output.
It is permissible to specify negative values for the order property. Negative values come in handy when prioritizing the display of a particular item while maintaining the order of other items. In cases where no value is explicitly stated, the default value of 0 is applied. Therefore, assigning a negative value like -1 to an item ensures its placement at the beginning, as any negative value is considered smaller than 0 and takes precedence in the display order.
Syntax
order: integer | initial | inherit;
Values
The order property utilizes integer values to specify the sequence of items.
integer: This is utilized to define the sequence of the flexible element. By default, it is set to 0.
It assigns the property value to its original default value.
inherit: The element utilizes the calculated value of its parent element, as the name suggests.
Let's explore the order property through visual representations.
Example1
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
.container {
display: flex;
background-color: blue;
height: 150px;
width: auto;
flex-wrap: wrap;
}
div {
background-color: cyan;
line-height: 40px;
color: black;
padding: 10px;
text-align: center;
font-size: 35px;
width: 100px;
margin: 20px;
}
</style>
</head>
<body>
<h1> CSS order Property </h1>
<div class = "container">
<div style = "order: 3"> 1 </div>
<div style = "order: 0"> 2 </div>
<div style = "order: 0"> 3 </div>
<div style = "order: 1"> 4 </div>
<div style = "order: -1"> 5 </div>
<div style = "order: 2"> 6 </div>
<div style = "order: 1"> 7 </div>
<div style = "order: -2"> 8 </div>
</div>
</body>
</html>
In the previous example, we demonstrated the utilization of negative values alongside positive values for certain elements. Elements with lower values will be presented first, while elements with the same order values will be displayed based on their sequence in the code.
Just like the instance mentioned earlier, if a div element is assigned an order value of -2, it will be shown first on the display. Subsequently, the element with an order value of -1 will appear, followed by other elements in a similar fashion.
Example2
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.list {
padding: 5px;
width: 100px;
height: 100px;
margin: 5px;
line-height: 100px;
color: black;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h2>Order property</h2>
<ul class="container">
<li class="list" style= "order: 5; background-color: orange;">1</li>
<li class="list" style= "order: -1; background-color: lightblue;">2</li>
<li class="list" style= "order: 1; background-color: yellow;">3</li>
<li class="list" style= "order: 2; background-color: red;">4</li>
<li class="list" style= "order: 0; background-color: cyan;">5</li>
</ul>
</body>
</html>