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

Bertha 。 2024-02-19 15:39 25阅读 0赞

**justify-content内容对齐**

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

基础语法  
justify-content属性定义了项目在主轴上的对齐方式。（左中右）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

.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

效果如图  
![justify-content: flex-start][justify-content_ flex-start]

> Wxml代码

> 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**  
效果如图  
![justify-content: flex-end][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**  
效果如图  
![在这里插入图片描述][20190109203151278.png]  
wxml代码沿用上小节

> Wxss代码

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

**justify-content: space-around**  
效果如图  
![justify-content: 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精通课程 （微信小程序界面设计必备技能）][Flex Box_]

![微信小程序样式Flex Box精通课程][Flex Box]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d2e7551f6be74e259af447221a00a76e.png
[justify-content_ flex-start]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/680c3e87fa7c4cfb9b2443d7116e66da.png
[justify-content_ flex-end]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3b55a6ee39f14bf09ab677153d06d7e0.png
[20190109203151278.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7452a7340d654f5599e9fe78ada799f4.png
[justify-content_ space-around]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ef63f8c552634d4c89542a69c95b92b0.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[Flex Box]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/465dae4bfce14656978c51b8f8d04f85.png