Flex Order CSS Properties
The order property flex and grid is a factor that affects the order of items in a container. Even if the element with the lower order value is written at the end in HTML, it will go to the beginning in the flex box layout.
You can also think of the order property as CSS magic that changes the position of elements without using javascript.
order: 0; /* Default Value */
order: -10;
order: 1;
The default value of order is "0". The order property can take negative values such as -1, -5. order value cannot take a decimal value such as "1.5"
!!! To use the order property, the container's display:flex | inline-flex; or display: grid | inline-grid; must have the feature. Otherwise, the order feature will not work.
Order CSS Example
In the example below, the item with the lower order value is at the top of the ranking. Values greater than 0 are passed to the end because the oreder default value is "0".
HTML
<div class="flex-container">
<div class="item order3">3</div>
<div class="item order2">2</div>
<div class="item order1">1</div>
<div class="item order-5">-5</div>
<div class="item">0</div>
<div class="item">0</div>
<div class="item order1">1</div>
</div>
CSS
.flex-container{
display: flex;
flex-direction: row;
padding: 15px;
border: 1px solid #e2e2e2;
}
.item{
background-color: #2da192;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 30px;
margin: 5px;
font-weight: 600;
color: #fff;
width: 100px;
}
.order3{
order: 3;
}
.order2{
order: 2;
}
.order1{
order: 1;
}
.order-5{
order: -5;
}