微信小程序样式Flex Box精通课程-Flex容器的属性-justify-content内容对齐(左中右)

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86177239

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精通课程 （微信小程序界面设计必备技能）