CSS Order
CSS Order
CSS Order property
CSS’s order This property specifies the order in which flexbox or grid items appear within a container. The order of flexbox or grid items is determined by the value of their order property. Flexbox or grid items with lower order values appear first, while items with the highest order value appear last.
The following are all possible values for the order property:
- integer : An integer representing the order of items to use.
- inherit : Uses the same value as its parent.
- initial : The element uses the default value, which is 0.
- unset : The element uses the default value, which is 0.
Here are some additional things to keep in mind:
-
The
- order property is not inherited by child elements.
- order property only affects flex items.
- Items in the container are sorted in ascending order by their sort value.
- order property is 0.
The
The default value of the
CSS Order – Integer Values
CSS The order property can be set to an integer value, which can be any positive or negative integer. Positive values mean that the item with the highest positive order value will be displayed last, while the item with the most negative value will be displayed first.
Example
Here is an example:
<html>
<head>
<style>
.flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex_container">
<div style="order: 2">Item 1</div>
<div style="order: 6">Item 2</div>
<div style="order: 4">Item 3</div>
<div style="order: -1">Item 4</div>
<div style="order: 5">Item 6</div>
<div style="order: -2">Item 7</div>
</div>
</body>
</html
CSS Order – Initial Value
order: initial This value sets the item’s order property back to its initial value, usually 0.
Example
Here is an example −
<html>
<head>
<style>
.flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex_container">
<div style="order: 5">Item 1</div>
<div style="order: 3">Item 2</div>
<div style="order: 1">Item 3</div>
<div style="order: 6">Item 4</div>
<div style="order: initial">Item 5</div>
<div style="order: 4">Item 6</div>
</div>
</body>
</html>
CSS Order – Unset Value
If the order property is set to unset , the flex items will be displayed according to the default order of the HTML tag.
Example
Below is an example where the order property is set to unset to display the first and third flex items in the default order.
<html>
<head>
<style>
.flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex_container">
<div style="order: unset">Item 1</div>
<div style="order: 4">Item 2</div>
<div style="order: unset">Item 3</div>
<div style="order: 1">Item 4</div>
<div style="order: 3">Item 5</div>
<div style="order: 5">Item 6</div>
</div>
</body>
</html>
CSS Order – Revert Value
When we set the order property to the revert value, the flex items will display according to the order they appear in the HTML code, just as if the web page did not include any CSS styles.
Example
Below is an example where the Order property is set to revert for the first and fifth flex items. They will now display according to the formatting in the HTML code.
<!DOCTYPE html>
<html>
<head>
<style>
.flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex_container">
<div style="order: revert">Item 2</div>
<div style="order: 3">Item 1</div>
<div style="order: 1">Item 3</div>
<div style="order: 6">Item 4</div>
<div style="order: revert">Item 5</div>
<div style="order: 4">Item 6</div>
</div>
</body>
</html>