位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 子元素的排序(order)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Flex项目的属性 下一篇: 放大比例(flex-grow)

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。示意图如7-30所示。

代码示例

小白教程网www.2d5.net

如下:

.item { order: <integer>; }

image.png

1.默认代码和效果

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-31所示。

image.png




2.Order改变

我们这里修改03区块的order(样式)值为负数,01区块的order(样式)值为1003区块的order(样式)值为100,(WXML页面不变)代码和效果如下。

       .wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-32所示。

image.png


上一篇: Flex项目的属性 下一篇: 放大比例(flex-grow)
毕业设计网             广告联系QQ:45157718(微信同号)