order

概述

CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

注意: order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speech。

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

参考 使用 CSS 弹性盒子 获取更多信息。

语法

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

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

取值

<integer>
表示此可伸缩项目所在的次序组。

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!

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

 

[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 属性是非标准实现。

参考

相关主题