Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into Türkçe yet. Join us and help get the job done!

Summary

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.

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.

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

See Using CSS flexible boxes for more properties and information.

Syntax

/* Numerical value including negative numbers */
order: 5;
order: -5; 

/* Global values */
order: inherit;
order: initial;
order: unset;

Values

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

Formal syntax

<integer>

Examples

Here is a basic HTML chunk:

<!DOCTYPE html>
<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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 21.0-webkit
29
18.0 (18.0)[1]
20.0 (20.0)[2]

10.0-ms[3]
11

12.10 7 -webkit
9
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 18.0 (18.0)[1]
20.0 (20.0)[2]
? 12.10 7 -webkit
9

[1] To activate Flexbox support for Firefox 18 and 19, the user change the about:config preference layout.css.flexbox.enabled to true. Multi-line flexible boxes are supported since Firefox 28.

Firefox currently incorrectly changes the tab order of elements. See bug 812687.

[2] In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] In Internet Explorer 10, a flexible container is declared using display:-ms-flexbox and not display:flex. The property is implemented under the non-standard name -ms-flex-order.

See also

Document Tags and Contributors

 Last updated by: Sebastianz,