当前阅读教程:Flex Box小程序应用 > 内容水平对齐(justify-content) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: flex-flow属性 | 下一篇: 垂直对齐(align-items) |
justify-content属性定义了项目在主轴上的对齐方式。示意图如7-16所示。 代码示例 如下: .box { justify-content: flex-start | flex-end | center | space-between | space-around; } n flex-start(默认值):左对齐 n flex-end:右对齐 n center: 居中 n space-between:两端对齐,项目之间的间隔都相等。 n space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 1.justify-content: flex-start.wxml文件代码示例 如下: <view> <view> <text>01</text> </view> <view class='fangxing'> <text>02</text> </view> </view> .wxss文件代码示例 如下 . zong{ display: flex; justify-content: flex-start; /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/ } .fangxing{ width: 100px; height: 100px; background-color: beige; } 效果如图7-17所示。 2.justify-content: flex-end.wxml文件代码示例 如下: <view> <view> <text>01</text> </view> <view class='fangxing'> <text>02</text> </view> </view> .wxss文件代码示例 如下: .zong{ display: flex; justify-content: flex-end; /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/ } 效果如图7-18所示。 3.justify-content: center.wxml文件代码示例 如下: <view> <view> <text>01</text> </view> <view class='fangxing'> <text>02</text> </view> </view> .wxss文件代码示例 如下: .zong{ display: flex; justify-content: center; /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/ } 效果如图7-19所示。 4.justify-content: space-between.wxml文件代码示例 如下: <view> <view> <text>01</text> </view> <view class='fangxing'> <text>02</text> </view> </view> .wxss文件代码示例 如下: .zong{ display: flex; justify-content: space-between; /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/ } 效果如图7-20所示。 5.justify-content: space-around.wxml文件代码示例 如下: <view> <view> <text>01</text> </view> <view class='fangxing'> <text>02</text> </view> </view> .wxss文件代码示例 如下: .zong{ display: flex; justify-content: space-around; /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/ } 效果如图7-21所示。 |
|
上一篇: flex-flow属性 | 下一篇: 垂直对齐(align-items) |