目录

order

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

语法

order: <integer>

值

值描述
<integer>用整数值来可伸缩项目排列顺序，数值小的排在前面。可以为负值。

例子

HTML 

<ul id="box" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

CSS 

.box{
  display:-webkit-flex;
  display:flex;
  margin:0;
  padding:10px;
  list-style:none;
  background-color:#333;
}
.box li{
  width:100px;
  height:100px;
  border:1px solid #aaa;
  text-align:center;
  color:#fff;
}
#box li:nth-child(3){
  -webkit-order:-1;
  order:-1;
}

执行结果

参考

外部链接


跳至内容顶部