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

迷南。 2024-02-19 15:39 32阅读 0赞

**order子元素的排序**

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

基础语法

> order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item { order: <integer>; }

![微信小程序样式Flex Box精通课程-Flex项目的属性-order子元素的排序][Flex Box_-Flex_-order]  
**小程序应用**  
默认效果  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-order子元素的排序][Flex Box_-Flex_-order 1]

> Wxml代码

> 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改变**  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-order子元素的排序][Flex Box_-Flex_-order 2]

我们这里修改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精通课程 （微信小程序界面设计必备技能）][Flex Box_]

![微信小程序样式Flex Box精通课程-Flex项目的属性-order子元素的排序][Flex Box_-Flex_-order 3]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[Flex Box_-Flex_-order]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8a235989f01f4437a052ee70c6661f1d.png
[Flex Box_-Flex_-order 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/123ed38453d34c789d768c275fb7584e.png
[Flex Box_-Flex_-order 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/24a693a03df14c80974a65d89279afd9.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[Flex Box_-Flex_-order 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f0878685c1da4e53b7bfd2cf2885e1ba.png