微信小程序样式Flex Box精通课程-Flex项目的属性-order子元素的排序

order子元素的排序

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

基础语法

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精通课程 （微信小程序界面设计必备技能）