The order
CSS property specifies the order used to lay out a flex or grid item in its flex or grid container. Items within the same container are laid out in ascending order according to their order
values. Elements with the same order
value are laid out in the order in which they appear in the source code.
/* <integer> values */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: unset;
Note: order
is only meant to affect the visual order of elements and not their logical or tab order. order
must not be used on non-visual media such as speech.
Syntax
Initial value | 0 |
---|---|
Applies to | flex items and absolutely-positioned flex container children |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | an integer |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Values
<integer>
- Represents the ordinal group to be used by the flex item. May be positive, negative, or
0
.
Formal syntax
<integer>
Example
Here is a basic HTML chunk:
<header>...</header> <main> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside> </main> <footer>...</footer>
The following CSS code creates 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.
main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order: 3; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'order' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 29 21 -webkit- | Yes Yes -webkit- | 201 49 -webkit- 18 — 283 | 11 10 -ms- | 12.1 | 9 7 -webkit- |
Absolutely-positioned flex children | Yes | Yes | No | 10 | 12.1 | Yes |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes Yes -webkit- | 201 49 -webkit- 18 — 283 | ? | 12.1 | 9 7 -webkit- |
Absolutely-positioned flex children | ? | ? | ? | No | 10 | 12.1 | Yes |
1. Since Firefox 28, multi-line flexbox is supported.
2. From version 48: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
3. From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Ordering flex items
- CSS Grid Guide: CSS Grid Layout and accessibility