order - CSS（层叠样式表）编辑

初始值	`0`
适用元素	flex items and absolutely-positioned flex container children
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	an integer
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

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

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

Formal syntax

<integer>

例子

这里是一个基本的HTML代码片段:

<!DOCTYPE html>
<header>…</header>
<div id='main'>
   <article>…</article>
   <nav>…</nav>
   <aside>…</aside>
</div>
<footer>…</footer>

下面的CSS代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。 Flexible Box 布局模块会自动地创建三个具有相同高度的内容块，也会使用所有可用的水平空间。

#main { display: flex; }
#main > article { flex:1;         order: 2; }
#main > nav     { width: 200px;   order: 1; }
#main > aside   { width: 200px;   order: 3; }

规范

Specification	Status	Comment
CSS Flexible Box Layout Module order	Candidate Recommendation

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	21.0-webkit 29	18.0 (18.0) (behind a pref) [1][3] 20.0 (20.0) 28	10.0, but under the non-standard `-ms-flex-order` name -ms [2] 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) (behind a pref) [1] 20.0 (20.0)	?	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) (behind a pref) [1]
20.0 (20.0)

12.10

7 -webkit
9

[1] 在 Firefox 18 和 19 中使用弹性布局，需要将 about:config 中 layout.css.flexbox.enabled 设置为 true。从 Firefox 28 起开始完整支持。

Firefox 中不正确地更改元素的 Tab 顺序. 查看 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] 在 Internet Explorer 10 中，使用 display: -ms-flexbox 来声明弹性盒子。-ms-flex-order 属性是非标准实现。