顺序 | 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) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
