order子元素的排序
基礎語法

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。

.item { order: <integer>; }

小程式應用
預設效果
效果如圖

Wxml程式碼

<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>
 

Wxss程式碼

.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;/*每個方框的外邊距*/
}
 

Order改變
效果如圖

我們這裡修改03區塊的order（樣式）值為負數，01區塊的order（樣式）值為10，03區塊的order（樣式）值為100，（wxml頁面不變）程式碼如下

Wxss程式碼

.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;
}
 

微信小程式樣式Flex Box精通課程 https://edu.csdn.net/course/detail/10624