order

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

order: <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;
}

执行结果

• a
• b
• c
• d
• e

外部链接

• order-MDN