css flex order属性子元素的排列顺序

css flex order属性子元素的排列顺序，值越小越排前面。父元素的flex-direction属性也可以对子元素进行排序，但是没有order灵活。当设置了父元素的flex-direction属性后，子元素的order属性将生效。

order属性

/* order值越小越排前面 */
.item1 {
  order: 1;
}
.item2 {
  order: 3;
}

完整代码

<style>
    #boxs
      {
        width:60%;
        height:100px;
        border:1px solid #333;
        display:flex; 
      }

      #boxs div
      {
        flex:1; 
      }
</style>
<div id="boxs">
      <div style="background-color:#ffc5c5;order:3"  >元素order 3</div>
      <div style="background-color:#7171f7;order:2"  >元素order 2</div>
      <div style="background-color:#bea1f7;order:0"  >元素order 0</div> 
      <div style="background-color:#c6d8c6;order:1"  >元素order 1</div>
 </div>

例子