当前阅读教程:Flex Box小程序应用 > 对齐和居中(margin) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 子元素的对齐(align-self) | 下一篇: Flex布局样例 |
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: 5px;/*内边距*/ } .fangxing1{ width: 60px; height: 60px; background-color: #f5f5dc; margin: 5px;/*每个方框的外边距*/ } .fangxing2{ width: 60px; height: 60px; background-color: #f5f5dc; margin: 5px;/*每个方框的外边距*/ } .fangxing3{ width: 60px; height: 60px; background-color: #f5f5dc; margin: 5px;/*每个方框的外边距*/ } 效果如图7-44所示。 2.对齐设置margin值为auto,自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为auto,可以使弹性子元素在弹性容器的垂直方向居中。 以下实例在第一个弹性子元素上设置了 “margin-right: auto; ”。 它将剩余的空间放置在元素的右侧性。 下面我们设置01区块的margin-righ值为auto,其他区块不变;我们只需要改造01区块对应的样式(样式类名fangxing1)代码即可。 .wxss文件文件代码示例 如下: .fangxing1{ width: 60px; height: 60px; background-color: #f5f5dc; margin-right: auto; } 效果如图7-45所示。 3.居中完美的居中 以下实例将完美解决我们平时碰到的居中问题。 使用弹性布局,居中变的很简单,只想要设置 margin: auto; 可以使得弹性子元素在垂直和水平方向上完全居中性。 .wxml文件代码示例 如下: <view> <view> <text>04</text> </view> </view> .wxss文件文件代码示例 如下: .zong2{ display: flex; padding: 5px;/*内边距*/ height: 200px; background-color: gainsboro; } .fangxing4{ width: 60px; height: 60px; background-color: #f5f5dc; margin: auto; } 效果如图7-46所示。 我们需要设置左右居中和上下居中,我们改造04区块的样式代码。 .wxss文件代码示例 如下: .fangxing4{ width: 60px; height: 60px; background-color: #f5f5dc; margin: auto; text-align: center;/*所有居中*/ line-height: 60px;/*上下居中*/ } 效果如图7-47所示。 |
|
上一篇: 子元素的对齐(align-self) | 下一篇: Flex布局样例 |