微信小程序day02_02之flex-wrap

清疚 2022-03-10 05:22 424阅读 0赞

flex-wrap 用于控制换行  
其默认值为 nowrap 即不换行  
wrap 为对其进行换行.

代码演示如下  
在上一节的代码中, index.wxss进行修改  
把.size的宽度改为 250rpx  
把`flex-wrap: wrap;`进行设置

.container{ 
    
      display: flex;
      /* flex-direction: row */
      /* flex-direction: row-reverse */
      /* flex-direction: column */
      /* flex-direction: column-reverse */
    
      flex-wrap: wrap;
    }
    
    .size { 
      width: 250rpx;
      height: 150rpx;
    }

显示效果如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
如果不设置flex-wrap: wrap; , 即默认的nowrap, 显示效果如下  
不换行, 并且把这一行中,每一个元素,进行了均分. 一行为750个rpx  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
如果设置了wrap-reverse , 那么显示效果如下 ,代表了进行换行,并进行反向的换行  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/0673e7fd074540ecb17a5e403764e95c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/89a4140e028f48cab2fed7d9b39d4e5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220310/1b7f162b6cba4c58a45dc55ad954d094.png