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
How to set the order of the flexible item, relative to the rest with JavaScript?
To set the order of flexible items relative to each other in JavaScript, use the order property. This CSS property controls the visual order of flex items without changing the HTML structure.
Syntax
element.style.order = "value";
The order property accepts integer values (positive, negative, or zero). Items with lower values appear first, and items with the same order value appear in their original HTML order.
Example
Here's how to reorder flex items dynamically using JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
#flexContainer {
border: 2px solid #333;
width: 420px;
height: 150px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
}
#flexContainer div {
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Original Order: DIV1, DIV2, DIV3</h3>
<div id="flexContainer">
<div style="background-color: orange;" id="item1">DIV1</div>
<div style="background-color: blue;" id="item2">DIV2</div>
<div style="background-color: green;" id="item3">DIV3</div>
</div>
<button onclick="reorderItems()">Reorder Items</button>
<button onclick="resetOrder()">Reset Order</button>
<script>
function reorderItems() {
// Set new order: DIV2 first, DIV3 second, DIV1 last
document.getElementById("item1").style.order = "3";
document.getElementById("item2").style.order = "1";
document.getElementById("item3").style.order = "2";
}
function resetOrder() {
// Reset to original order
document.getElementById("item1").style.order = "0";
document.getElementById("item2").style.order = "0";
document.getElementById("item3").style.order = "0";
}
</script>
</body>
</html>
How It Works
The order property works as follows:
- Default value: 0 (items appear in HTML order)
- Lower values: Items appear earlier in the flex container
- Higher values: Items appear later in the flex container
- Negative values: Allowed and will place items before those with positive values
Practical Example with Different Order Values
<!DOCTYPE html>
<html>
<head>
<style>
.flex-demo {
display: flex;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.flex-item {
padding: 20px;
margin: 5px;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-demo" id="demo">
<div class="flex-item" id="a">A (order: 0)</div>
<div class="flex-item" id="b">B (order: 0)</div>
<div class="flex-item" id="c">C (order: 0)</div>
</div>
<button onclick="setCustomOrder()">Set Custom Order</button>
<script>
function setCustomOrder() {
document.getElementById("a").style.order = "2";
document.getElementById("b").style.order = "-1";
document.getElementById("c").style.order = "1";
// Update text to show new order values
document.getElementById("a").textContent = "A (order: 2)";
document.getElementById("b").textContent = "B (order: -1)";
document.getElementById("c").textContent = "C (order: 1)";
}
</script>
</body>
</html>
Key Points
- The
orderproperty only works on flex items (children of a flex container) - It changes visual order without affecting the HTML structure or accessibility order
- Items with the same order value maintain their original HTML sequence
- This property is particularly useful for responsive design and dynamic layouts
Conclusion
The order property provides powerful control over flex item positioning through JavaScript. Use it to create dynamic, responsive layouts that can reorder content based on user interactions or screen size changes.
Updated on: 2026-03-15T23:18:59+05:30
176 Views
Advertisements