order

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!

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.

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

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: <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 Candidate Recommendation  

Browser compatibility

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

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

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

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:
Mitwirkende an dieser Seite: Sheppy, scottrowe, teoli, ethertank, kscarfone, FredB, Dholbert, SJW
Zuletzt aktualisiert von: SJW,
Seitenleiste ausblenden