CSS Order
The CSS order property controls the visual order of Flex Items inside a Flex Container.
By default, Flex Items appear in the same order as they are written in the HTML. The order property allows us to change their visual position without changing the HTML structure.
What Does Order Do?
The order property changes where a Flex Item appears visually inside a Flex Container.
It does not change the actual order of the elements in the HTML source.
Flex Items are arranged according to their numeric order values. Items with lower values appear before items with higher values.
Syntax
.item {
order: number;
}Default Order
The default value of the order property is 0.
.item {
order: 0;
}When all Flex Items have the same order value, they appear according to their original order in the HTML.
Order Diagram
Default visual order follows the HTML order.
Example 1: Changing the Order
Suppose the HTML contains three items in this order: HTML, CSS, and JavaScript.
.html-item {
order: 3;
}
.css-item {
order: 1;
}
.js-item {
order: 2;
}The HTML item has order 3.
The CSS item has order 1.
The JavaScript item has order 2.
Therefore, the visual order becomes: CSS → JavaScript → HTML.
Output
Example 2: Negative Order Values
The order property can also use negative numbers.
.item1 {
order: 0;
}
.item2 {
order: -1;
}
.item3 {
order: 1;
}The item with order: -1; appears before the items with order 0 and 1.
Therefore, negative values can be used to move an item toward the beginning of the Flex Container.
Example 3: Same Order Values
Multiple Flex Items can have the same order value.
.item1 {
order: 1;
}
.item2 {
order: 1;
}
.item3 {
order: 2;
}Item 1 and Item 2 both have order: 1;.
Item 3 has order: 2;.
Therefore, Item 1 and Item 2 appear before Item 3. Items having the same order retain their relative source order.
Order Values
| Order Value | Meaning |
|---|---|
| -1 | Appears before items with order 0. |
| 0 | Default order value. |
| 1 | Appears after items with lower order values. |
| 2 | Appears after items with order 0 and 1. |
How the Order Property Works
Lower Value
A lower order value appears earlier.
Higher Value
A higher order value appears later.
Same Value
Items with the same value maintain their relative source order.
Example 🤓
Consider a course website where the HTML structure contains several course cards.
On a particular layout, you may want the .NET course card to appear first visually even though it is not the first element in the HTML.
.java-course {
order: 2;
}
.dotnet-course {
order: 1;
}
.python-course {
order: 3;
}The visual order will be:
.NET → Java → Python
The HTML source order does not need to be changed to achieve this visual arrangement.
Important Accessibility Consideration
The order property changes the visual presentation, but it does not generally change the underlying HTML source order.
Therefore, the logical HTML structure should still make sense for keyboard navigation, screen readers, and other assistive technologies.
Summary
The order property controls the visual order of Flex Items. The default value is 0. Items with lower order values appear before items with higher values. Negative values are also allowed. Items with the same order value maintain their relative source order.