Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the order of flexible items using CSS?
The CSS order property allows you to change the visual order of flex items without altering their position in the HTML source. This property only works on elements that are children of a flex container (an element with display: flex or display: inline-flex).
NOTE The order property only works with flex items inside a flex container.
Syntax
selector {
order: integer;
}
Possible Values
| Value | Description |
|---|---|
integer |
Any integer value (positive, negative, or zero). Default is 0. |
Items are arranged in ascending order of their order values. Items with the same order value appear in their source order.
Example 1: Basic Reordering
The following example demonstrates how to reorder five flex items using the order property
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
border: 2px solid #333;
padding: 10px;
gap: 5px;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
flex: 1;
}
.item1 { order: 3; }
.item2 { order: 5; }
.item3 { order: 1; }
.item4 { order: 2; }
.item5 { order: 4; }
</style>
</head>
<body>
<h2>Flex Item Ordering Example</h2>
<div class="flex-container">
<div class="flex-item item1">Item 1 (order: 3)</div>
<div class="flex-item item2">Item 2 (order: 5)</div>
<div class="flex-item item3">Item 3 (order: 1)</div>
<div class="flex-item item4">Item 4 (order: 2)</div>
<div class="flex-item item5">Item 5 (order: 4)</div>
</div>
</body>
</html>
Five green boxes appear in the following visual order: Item 3, Item 4, Item 1, Item 5, Item 2 - demonstrating how the order property overrides the HTML source order.
Example 2: Negative Order Values
You can also use negative values with the order property
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
border: 2px solid #333;
padding: 10px;
gap: 5px;
}
.flex-item {
background-color: #2196F3;
color: white;
padding: 15px;
text-align: center;
border-radius: 5px;
min-width: 100px;
}
.first { order: -1; }
.second { order: 0; }
.third { order: 1; }
</style>
</head>
<body>
<h2>Using Negative Order Values</h2>
<div class="flex-container">
<div class="flex-item second">Second (order: 0)</div>
<div class="flex-item third">Third (order: 1)</div>
<div class="flex-item first">First (order: -1)</div>
</div>
</body>
</html>
Three blue boxes appear in the order: First, Second, Third - showing how negative values place items before those with zero or positive order values.
Key Points
- The
orderproperty only affects visual order, not the DOM structure - Default order value is 0 for all flex items
- Items with lower order values appear first
- Negative values are allowed and useful for positioning items at the beginning
- Screen readers and keyboard navigation follow the HTML source order, not the visual order
Conclusion
The order property provides flexible control over the visual arrangement of flex items. Use it to create responsive layouts where item order changes based on screen size or to highlight important content by moving it to the front.
219 Views
