微信小程序flex box界面设计入门到精通-14课-Flex项目的属性-margin（对齐和居中）

<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>

.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;/*每个方框的外边距*/

.fangxing1{

  width: 60px; height: 60px; 

  background-color:  #f5f5dc;

  margin-right: auto;

}

<view class='zong2'>

    <view class='fangxing4'>

    <text>04</text>

  </view>

 </view>

.zong2{  

  display: flex;

  padding: 5px;/*内边距*/

  height: 200px;

  background-color:  gainsboro;

}

.fangxing4{

  width: 60px; height: 60px; 

  background-color:  #f5f5dc;

  margin: auto;

}

.fangxing4{

  width: 60px; height: 60px; 

  background-color:  #f5f5dc;

  margin: auto;

  text-align: center;/*所有居中*/

  line-height: 60px;/*上下居中*/

}