justify-content內容對齊
基礎語法
justify-content屬性定義了專案在主軸上的對齊方式。（左中右）

.box { 
justify-content: flex-start | flex-end | center | space-between | space-around; 
} 

 flex-start（預設值）：左對齊
 flex-end：右對齊
 center： 居中
 space-between：兩端對齊，專案之間的間隔都相等。
 space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

小程式應用

justify-content: flex-start

效果如圖

Wxml程式碼

<view class='zong'>
   <view class='fangxing'>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

Wxss程式碼

/* */
.zong{
  display: flex; 
  justify-content:  flex-start;
/*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/
}
.fangxing{
  width: 100px; height: 100px;  
  background-color:  beige;
}
 

justify-content: flex-end
效果如圖

wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content:  flex-end;
  /*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/
}

justify-content: center
效果如圖
wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content:  center;
  /*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/
}
 

justify-content: space-between
效果如圖

wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content:  space-between;
  /*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/
}

justify-content: space-around
效果如圖

wxml程式碼沿用上小節

Wxss程式碼

.zong{
  display: flex; 
  justify-content:  space-around;
  /*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/
}

歡迎大家收看我的視訊教程：微信小程式介面設計佈局Flex Box精通課程 （微信小程式介面設計必備技能）