order

  • Revision slug: CSS/order
  • Revision title: order
  • Revision id: 335921
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef }}

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.

  • {{ Xref_cssinitial }} {{cssinitial("order")}}
  • Applies to flex items
  • {{ Xref_cssinherited }} no
  • Media {{ Xref_cssvisual }}
  • {{ Xref_csscomputed }} as specified

See Using CSS flexible boxes for more properties and information.

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: {{csssyntax("order")}}
order: 5

order: initial

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
{{ SpecName('CSS3 Flexbox', '#order-property', 'order') }} {{ Spec2('CSS3 Flexbox') }}  

Browser compatibility

{{ CompatibilityTable }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("18.0") }} (behind a pref) [1]
{{CompatGeckoDesktop("20.0")}}
21.0{{ property_prefix("-webkit") }} {{ CompatNo }} 12.10 {{ CompatNo }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatNo }} 12.10 {{ CompatNo }}

[1] Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

See also

Revision Source

<div>
  {{ CSSRef }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>order</code> property specifies the order used to lay out flex items in their flex container. Elements are laid out by ascending order of the <code>order</code> value. Elements with the same <code>order</code> value are laid out in the order they appear in the source code.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial }}</dfn> {{cssinitial("order")}}</li>
  <li><dfn>Applies to</dfn> flex items</li>
  <li><dfn>{{ Xref_cssinherited }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual }}</li>
  <li><dfn>{{ Xref_csscomputed }}</dfn> as specified</li>
</ul>
<p>See <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> for more properties and information.</p>
<div class="note">
  <strong>Note</strong>: <code>order</code> 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.</div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("order")}}
</pre>
<pre>
order: 5

order: initial
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;integer&gt;</code></dt>
  <dd>
    Represents the ordinal group the flex item has been assigned.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>Here is a basic HTML chunk:</p>
<pre class="brush:html;">
&lt;!DOCTYPE html&gt;
&lt;header&gt;…&lt;/header&gt;
&lt;div id='main'&gt;
   &lt;article&gt;…&lt;/article&gt;
   &lt;nav&gt;…&lt;/nav&gt;
   &lt;aside&gt;…&lt;/aside&gt;
&lt;/div&gt;
&lt;footer&gt;…&lt;/footer&gt;</pre>
<p>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.</p>
<pre class="brush:css;">
#main { display: flex; }
#main &gt; article { flex:1;         order: 2; }
#main &gt; nav     { width: 200px;   order: 1; }
#main &gt; aside   { width: 200px;   order: 3; }</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Flexbox', '#order-property', 'order') }}</td>
      <td>{{ Spec2('CSS3 Flexbox') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoDesktop("18.0") }} (behind a pref) [1]<br />
          {{CompatGeckoDesktop("20.0")}}</td>
        <td>21.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatNo }}</td>
        <td>12.10</td>
        <td>{{ CompatNo }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatNo }}</td>
        <td>12.10</td>
        <td>{{ CompatNo }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
  <li>{{ CSS_Reference:FlexBox }}</li>
</ul>
Revert to this revision