The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out by ascending order of the order value. Elements with the same order value are laid out in the order they appear in the source code.
Initial0
Applies toflex items and absolutely-positioned flex container children
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Note: order is only meant to affect the visual order, not the logical order of elements. It must not be used on non-visual media such as speech.
Syntax
Formal syntax: <integer>
order: 5
order: inherit
Values
<integer>
Represents the ordinal group the flex item has been assigned.
Examples
Here is a basic HTML chunk:
1
<!DOCTYPE html>
2
<header>…</header>
3
<divid='main'>
4
<article>…</article>
5
<nav>…</nav>
6
<aside>…</aside>
7
</div>
8
<footer>…</footer>
The following CSS code should create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available.
1
#main { display: flex; }
2
#main > article { flex:1; order: 2; }
3
#main > nav { width: 200px; order: 1; }
4
#main > aside { width: 200px; order: 3; }
Compatibility
Desktop browsers
Feature
Firefox (Gecko)
Chrome
Internet Explorer
Opera
Safari
Basic support
18.0 (18.0) (behind a pref) 20.0 (20.0)
21.0-webkit
10.0, but under the non-standard -ms-flex-order name -ms
