微信小程序flex box界面设计入门到精通-08课-Flex项目的属性-order子元素的排序

.item { order: <integer>; }

<view class='zong'>

   <view class='fangxing1'>

    <text>01</text>

  </view>

  <view  class='fangxing2'>

    <text>02</text>

  </view>

  <view  class='fangxing3'>

    <text>03</text>

  </view>

</view>

.zong{

  display: flex;

  flex-direction: row  ;

  padding: 10px;/*内边距*/

}

.fangxing1{

  width: 100px; height: 100px; 

  background-color:  #f5f5dc;

  margin: 10px;/*每个方框的外边距*/

}

.fangxing2{

  width: 100px; height: 100px; 

  background-color:  #f5f5dc;

  margin: 10px;/*每个方框的外边距*/

}

.fangxing3{

  width: 100px; height: 100px; 

  background-color:  #f5f5dc;

  margin: 10px;/*每个方框的外边距*/

}

.zong{

  display: flex;

  flex-direction: row  ;

  padding: 10px;/*内边距*/

}

.fangxing1{

  width: 100px; height: 100px; 

  background-color:  #f5f5dc;

  margin: 10px;/*每个方框的外边距*/

  order: 10;

}

.fangxing2{

  width: 100px; height: 100px; 

  background-color:  #f5f5dc;

  margin: 10px;/*每个方框的外边距*/

  order: 100;

}

.fangxing3{

  width: 100px; height: 100px; 

  background-color:  #f5f5dc;

  margin: 10px;/*每个方框的外边距*/

  order: -1;

}