微信小程序flex box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)

justify-content: flex-start | flex-end | center | space-between | space-around;

}

<view class='zong'>

   <view class='fangxing'>

    <text>01</text>

  </view>

  <view  class='fangxing'>

    <text>02</text>

  </view>

</view>

/* */

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

}

.zong{

  display: flex;

  justify-content:  flex-end;

  /*flex-start是默认值：flex-start|flex-end|center|space-between|space-around*/

}

.zong{

  display: flex;

  justify-content:  center;

  /*flex-start是默认值：flex-start|flex-end|center|space-between|space-around*/

}

.zong{

  display: flex;

  justify-content:  space-between;

  /*flex-start是默认值：flex-start|flex-end|center|space-between|space-around*/

}

.zong{

  display: flex;

  justify-content:  space-around;

  /*flex-start是默认值：flex-start|flex-end|center|space-between|space-around*/

}