微信小程序样式Flex Box精通课程-Flex项目的属性-margin（对齐和居中）

margin（对齐和居中）

默认样式和代码

效果如图

Wxml代码

<view class='zong'>  
  <view class='fangxing1'>
    <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;/*每个方框的外边距*/
}

对齐

设置"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;
}

居中

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

效果如图

Wxml代码

<view class='zong2'>
    <view class='fangxing4'>
    <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;
}

如何让区块中的文字居中

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

效果如图

Wxss代码

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

微信小程序样式Flex Box精通课程 https://edu.csdn.net/course/detail/10624