当前阅读教程:Flex Box小程序应用 > 子元素的排序(order) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Flex项目的属性 | 下一篇: 放大比例(flex-grow) |
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。示意图如7-30所示。 代码示例 如下: .item { order: <integer>; } 1.默认代码和效果.wxml文件代码示例 如下: <view> <view> <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;/*每个方框的外边距*/ } 效果如图7-31所示。 2.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; } 效果如图7-32所示。 |
|
上一篇: Flex项目的属性 | 下一篇: 放大比例(flex-grow) |