mozilla
Your Search Results

    order

    This article is in need of a technical review.

    This article is in need of an editorial review.

    Summary

    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.

    Note: order is only meant to affect the visual order, not the logical order, or the tab order, of elements. It must not be used on non-visual media such as speech.

    • Initial value 0
    • Applies to flex items and absolutely-positioned flex container children
    • Inherited no
    • Media visual
    • Computed value as specified
    • Animatable yes, as an integer
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    See Using CSS flexible boxes for more properties and information.

    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:

    <!DOCTYPE html>
    <header>…</header>
    <div id='main'>
       <article>…</article>
       <nav>…</nav>
       <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; }
    #main > article { flex:1;         order: 2; }
    #main > nav     { width: 200px;   order: 1; }
    #main > aside   { width: 200px;   order: 3; }

    Specifications

    Specification Status Comment
    CSS Flexible Box Layout Module
    The definition of 'order' in that specification.
    Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 21.0-webkit 18.0 (18.0) (behind a pref) [1][3]
    20.0 (20.0)
    10.0, but under the non-standard -ms-flex-order name -ms  [2] 12.10 ?
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? 18.0 (18.0) (behind a pref) [1]
    20.0 (20.0)
    ? 12.10 ?

    [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.

    [2] In Internet Explorer 10, a flexible container is declared using display:-ms-flexbox and not display:flex.

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

    See also

    Document Tags and Contributors

    Last updated by: thijsBreker,