首页 > 属性 Properties >  伸缩盒(Flexible Box)(新)  >  order

版本 : CSS3 order

语法:

order <integer>

默认值 0

适用于 :flex子项和flex容器中的绝对定位子元素

继承性 :无

动画性 :是

计算值 :指定值

取值:

<integer>
用整数值来定义排列顺序,数值小的排在前面。可以为负值。

说明:

设置或检索弹性盒模型对象的子元素出現的順序。
  • order定义将会影响 <' position '> 值为 static 元素的层叠级别,数值小的会被数值大的盖住。

    demo:

    .test { display: flex; } .item2 { order: -1; margin: -30px; }&amp;lt;div class="test"&amp;gt;&amp;lt;p class="item1"&amp;gt;flex item1&amp;lt;/p&amp;gt;&amp;lt;p class="item2"&amp;gt;flex item2&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;

    此时,item1将会盖在item2之上

  • 对应的脚本特性为 order

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-10.0 2.0-21.0 4.0-20.0 6.0 15.0+ -webkit- 6.0-6.1 2.1-4.3 18.0-19.0
11.0+ 22.0+ 21.0+ -webkit- 6.1+ -webkit- 17.0+ 7.0+ -webkit- 4.4+ 20.0+ -webkit-
29.0+ 9.0+ 9.0+ 28.0+