顺序 | order
order
CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
/* Numerical value, including negative numbers */
order: 5;
order: -5;
/* Global values */
order: inherit;
order: initial;
order: unset;
注意:order仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speech。
参考 使用 CSS 弹性盒子 获取更多信息。
语法
| 初始值 | 0 |
|---|---|
| 适用于 | 弹性项目和绝对定位的柔性容器的孩子 |
| 遗传 | 没有 |
| 媒体 | 视觉 |
| 计算值 | 作为指定 |
| 动画类型 | 一个整数 |
| 规范的顺序 | 形式语法定义的独特的非模糊顺序 |
取值
<integer>表示弹性项目已分配的序号组。
形式语法
<integer>
实例
这里是一个基本的HTML代码片段:
<header>...</header>
<div id='main'>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>...</footer>
下面的CSS代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。 Flexible Box 布局模块会自动地创建三个具有相同高度的内容块，也会使用所有可用的水平空间。
#main { display: flex; text-align:center; }
#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 ModuleThe definition of 'order' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 21.0-webkit 29 | (Yes)-webkit (Yes) | 18.0 (18.0)1 20.0 (20.0)2 | 10.0-ms3 11 | 12.10 | 7 -webkit 9 |
| Absolutely-Positioned Flex Children | (Yes) | (Yes) | No support4 | 10.0 | 12.10 | (Yes) |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | (Yes)-webkit (Yes) | 18.0 (18.0)1 20.0 (20.0)2 | ? | 12.10 | 7 -webkit 9 |
| Absolutely-Positioned Flex Children | {CompatVersionUnknown}} | {CompatVersionUnknown}} | {CompatVersionUnknown}} | No support4 | 10.0 | 12.1 | (Yes) |
