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

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: 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所示。

image.png



2.对齐

设置margin值为auto,自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为auto,可以使弹性子元素在弹性容器的垂直方向居中。 以下实例在第一个弹性子元素上设置了 margin-right: auto; ”。 它将剩余的空间放置在元素的右侧性。

下面我们设置01区块的margin-righ值为auto,其他区块不变;我们只需要改造01区块对应的样式(样式类名fangxing1)代码即可。

.wxss文件文件代码示例

小白教程网www.2d5.net

如下:

.fangxing1{
  width: 60px; height: 60px; 
  background-color:  #f5f5dc;
  margin-right: auto;
}

效果如图7-45所示。

image.png



3.居中

完美的居中 以下实例将完美解决我们平时碰到的居中问题。 使用弹性布局,居中变的很简单,只想要设置 margin: auto; 可以使得弹性子元素在垂直和水平方向上完全居中性。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
    <view>
    <text>04</text>
  </view>
 </view>

.wxss文件文件代码示例

小白教程网www.2d5.net

如下:

.zong2{ 
  display: flex;
  padding: 5px;/*内边距*/
  height: 200px;
  background-color:  gainsboro;
}
.fangxing4{
  width: 60px; height: 60px; 
  background-color:  #f5f5dc;
  margin: auto;
}

效果如图7-46所示。

image.png

我们需要设置左右居中和上下居中,我们改造04区块的样式代码。

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.fangxing4{
  width: 60px; height: 60px; 
  background-color:  #f5f5dc;
  margin: auto;
  text-align: center;/*所有居中*/
  line-height: 60px;/*上下居中*/
}

效果如图7-47所示。

image.png


上一篇: 子元素的对齐(align-self) 下一篇: Flex布局样例
毕业设计网             广告联系QQ:45157718(微信同号)