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