Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

order

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

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

Note: 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

See Using CSS flexible boxes for more properties and information.

语法

Formal syntax: <integer>
order: 5

order: inherit

取值

<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  

浏览器兼容性

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] 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

参考

文档标签和贡献者

 此页面的贡献者: dche, fscholz, Go7hic, Sebastianz, FredWe
 最后编辑者: dche,