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

青旅半醒 2024-02-19 15:40 3阅读 0赞

### margin（对齐和居中） ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

> 默认样式和代码

效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-margin（对齐和居中）][Flex Box_-Flex_-margin]  
**Wxml代码**

**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）代码即可。

效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-margin（对齐和居中）][Flex Box_-Flex_-margin 1]  
**Wxss代码**

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

### 居中 ###

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

效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-margin（对齐和居中）][Flex Box_-Flex_-margin 2]

> Wxml代码

> Wxss代码

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

### 如何让区块中的文字居中 ###

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

效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-margin（对齐和居中）][Flex Box_-Flex_-margin 3]

> Wxss代码

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

[欢迎大家收看我的视频教程：微信小程序界面设计布局Flex Box精通课程 （微信小程序界面设计必备技能）][Flex Box_]

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[Flex Box_-Flex_-margin]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/972cca9d265f43dabe90159f61f6761c.png
[Flex Box_-Flex_-margin 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f413a365bc4b46f0afb38603e188222d.png
[Flex Box_-Flex_-margin 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/54f909d51e9c4d338fd697e769911ce8.png
[Flex Box_-Flex_-margin 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fefdc5b1dc77458891864b081e4a7972.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[Flex Box_-Flex_-margin 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c4a33ad43def4b58845e73581f548c87.png