The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

/* Numerical value, including negative numbers */
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.

See Using CSS flexible boxes for more properties and information.

Syntax

Initial value0
Applies toflex items and absolutely-positioned flex container children
Inheritedno
Mediavisual
Computed valueas specified
Animation typean integer
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Values

<integer>
Represents the ordinal group the flex item has been assigned.

Formal syntax

<integer>

Examples

Here is a basic HTML chunk:

<header>...</header>
<div id='main'>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</div>
<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.

#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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

29

21 -webkit-

Yes

Yes -webkit-

201

49 -webkit-

48 -webkit- 2

18 — 283

11

10 -ms-

12.1

9

7 -webkit-

Absolutely-positioned flex children Yes Yes No1012.1 Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support ? ?

Yes

Yes -webkit-

201

49 -webkit-

48 -webkit- 2

18 — 283

?12.1

9

7 -webkit-

Absolutely-positioned flex children ? ? ? No1012.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

Document Tags and Contributors

 Last updated by: fscholz,