微信小程序样式Flex Box精通课程-Flex容器的属性-flex-wrap 项目换行

短命女 2024-02-19 15:38 51阅读 0赞

**flex-wrap 项目换行**

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

基础语法  
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

nowrap（默认）：不换行  
![nowrap（默认）：不换行][nowrap]

wrap：换行，第一行在上方  
![wrap：换行，第一行在上方][wrap]

wrap-reverse：换行，第一行在下方  
![wrap-reverse：换行，第一行在下方][wrap-reverse]

**小程序应用**  
flex-wrap: nowrap  
效果如图  
![flex-wrap: nowrap][flex-wrap_ nowrap]

我们沿用上章节的布局代码和样式代码  
在我们容器的样式中增加代码  
Wxss代码

.zong{
      flex-wrap: nowrap  /* nowrap默认值，可选属性值：nowrap|wrap|wrap-reverse */
    }

**flex-wrap: wrap**  
效果如图  
![flex-wrap: wrap][flex-wrap_ wrap]

> 在容器增加样式flex-wrap: wrap；完整代码如下：  
> Wxml代码

Wxss代码

/* */
    .zong{
      padding: 10px;
      display: flex; 
      flex-direction: row ;/* row默认，属性值有row|row-reverse|column|column-reverse*/
      flex-wrap: wrap;  /* nowrap 默认，属性值有：nowrap | wrap | wrap-reverse */
    }
    .fangxing{
      width: 100px; height: 100px;  
      background-color:  beige;
      margin: 10px;
    }

flex-wrap: wrap-reverse  
效果如图  
![flex-wrap: wrap-reverse][flex-wrap_ wrap-reverse]

> 我们只需更改上小节的容器样式，变更flex-wrap: wrap-reverse。

**Wxss代码**

.zong{
      padding: 10px;
      display: flex; 
      flex-direction: row ;/* row默认，属性值有row|row-reverse|column|column-reverse*/
      flex-wrap: wrap-reverse;  /* nowrap 默认，属性值有：nowrap | wrap | wrap-reverse */
    }

[欢迎大家收看我的视频教程：微信小程序界面设计布局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/2bce70d6765c449d89bb43a3d3adfd61.png
[nowrap]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ddfc038428054ae88e6f65e5fc2a1afb.png
[wrap]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/de0a6066ab0c4fb795d5fa4439b3dd18.png
[wrap-reverse]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9fa8034773784e09a5e4f41591799605.png
[flex-wrap_ nowrap]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a4fa1b320dc24a55ba4e59edc5797376.png
[flex-wrap_ wrap]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d95c18b42cd643ca8df37451dcb4a5cc.png
[flex-wrap_ wrap-reverse]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/db4dc2c1589b4858ba6c1156e9e38299.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[Flex Box]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ec3c09bed09849cda94ed53ec1ee3b0a.png