CSS propertyFlexbox
order
Changes the display order of an item inside a flex or grid container.
- Initial value
0- Inherited
- No
- Animatable
- yes, as an integer
- Applies to
- flex items and grid items
- JavaScript
element.style.order = "-1"
Example
#CSS
.layout {
display: flex;
flex-direction: column;
}
.layout .notice {
order: -1;
}Example HTML
<div class="layout stage" style="gap: 8px;">
<p style="margin: 0">Lesson content about Flexbox.</p>
<p class="notice" style="margin: 0; color: #fbbf24;">Note: new version of the lesson!</p>
</div>Preview
Definition and usage
#The order property takes an integer. Items display from the lowest value to the highest, and when values are equal, the order in the code decides. By default every item has 0.
This lets you reorder items purely visually, for example moving a sidebar above the content on a phone, or highlighting one card by putting it first.
The reading order for assistive technology and Tab-key navigation doesn’t change. Large reorderings can therefore confuse keyboard users.
Syntax
#Syntax
order: <integer>;Values
#Values in practice
#0
The default value: the order from the code.
.target { order: 0; }-1
Item 3 jumps to the front.
.target { order: -1; }1
Item 3 moves to the end, after the items with order 0.
.target { order: 1; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- If the order matters for the meaning of the content, change it in the HTML, not with
order. - Stick to small numbers, like -1, 0, and 1. It’s easier to keep track of what ends up where.
Related entries
#Spotted a mistake or missing an example? Write to us.