css flex 教程

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>

例子

Catalog
css flex 教程 父元素属性 flex-direction 属性 flex-wrap 属性 flex-flow 属性 justify-content 属性 align-items 属性 align-content 属性 子元素属性 order 属性 flex-grow 属性 flex-shrink 属性 flex-basis 属性 flex 属性 align-self 属性 常见用例 左边固定右边自适应 右边固定左边自适应 两边固定中间自适应 上下固定中间自适应 css flex 1 省略号