微信小程序样式Flex Box精通课程-Flex容器的属性-align-content设置各个行的对齐

柔光的暖阳◎ 2024-02-19 15:39 12阅读 0赞

**align-content设置各个行的对齐**

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

> align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,  
> 但它不是设置弹性子元素的对齐，而是设置各个行的对齐

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

 flex-start：与交叉轴的起点对齐。  
 flex-end：与交叉轴的终点对齐。  
 center：与交叉轴的中点对齐。  
 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。  
 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。  
 stretch（默认值）：轴线占满整个交叉轴。

[欢迎大家收看我的视频教程：微信小程序界面设计布局Flex Box精通课程 （微信小程序界面设计必备技能）][Flex Box_]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

[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/7cb7aae3a2e34b4cb41e6bb955a20d9b.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9c93c5212a2245ddbd86b4a3c1f3b144.png