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
Selected Reading
Reordering Individual Flex Items using CSS3
The CSS order property allows you to reorder individual flex items without changing their HTML structure. This property only works on flex items and accepts integer values to determine the visual order.
Syntax
.flex-item {
order: integer;
}
Possible Values
| Value | Description |
|---|---|
integer |
Any positive or negative integer. Default is 0. |
0 |
Default value (normal document order) |
Example: Reordering Flex Items
The following example demonstrates how to reorder flex items using the order property. The third div will appear first, followed by the first div, then the second div −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
height: 120px;
display: flex;
width: 100%;
border: 2px solid red;
margin-bottom: 20px;
}
.flex-item {
width: 150px;
height: 120px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
}
.first {
background-color: #3366ff;
order: 2;
}
.second {
background-color: #ff3333;
order: 3;
}
.third {
background-color: #8c33ff;
order: 1;
}
</style>
</head>
<body>
<h3>Original HTML Order vs Visual Order</h3>
<p>HTML Order: First ? Second ? Third</p>
<p>Visual Order: Third ? First ? Second</p>
<div class="container">
<div class="flex-item first">First Div<br>(order: 2)</div>
<div class="flex-item second">Second Div<br>(order: 3)</div>
<div class="flex-item third">Third Div<br>(order: 1)</div>
</div>
</body>
</html>
Three colored boxes appear in a flex container with red border. Despite the HTML order being First-Second-Third, the visual order is Third-First-Second due to the order property values (1-2-3).
Key Points
- Items with lower
ordervalues appear first - Items with the same
ordervalue follow their HTML source order - Negative values are allowed and will appear before items with positive values
- The
orderproperty only affects visual presentation, not screen reader order
Conclusion
The order property provides a powerful way to rearrange flex items visually without modifying the HTML structure. Use integer values to control the display order, with lower numbers appearing first.
Updated on: 2026-03-15T15:03:26+05:30
329 Views
Advertisements