微信小程序样式Flex Box精通课程-Flex项目的属性-flex-shrink项目的缩小比例

不念不忘少年蓝@ 2024-02-19 15:40 21阅读 0赞

### flex-shrink项目的缩小比例 ###

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

基础语法

> flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item { flex-shrink: <number>; /* default 1 */ }

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。  
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

### 小程序应用 ###

默认代码和效果  
效果如  
![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-shrink项目的缩小比例][Flex Box_-Flex_-flex-shrink]

> 父容器设定了flex模式后，其内部的子元素默认都是按等比例缩小的。

**Wxml代码**

**Wxss代码**

.zong{ 
      display: flex; 
      padding: 5px;/*内边距*/
    }
    .fangxing1{
      width: 300rpx; height: 300rpx;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
    }
    .fangxing2{
      width: 300rpx; height: 300rpx;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
    }
    .fangxing3{
      width: 300rpx; height: 300rpx;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
    }

**实例01**  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-shrink项目的缩小比例][Flex Box_-Flex_-flex-shrink 1]

> 下面我们设置01区块的flex-shrink的值为0（0表示不缩小，默认值1表示缩小），其他区块不变；我们只需要改造01区块对应的样式（样式类名fangxing1）代码即可。

**Wxss代码**

.fangxing1{
      width: 300rpx; height: 300rpx;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-shrink: 0;
    }

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

![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-shrink项目的缩小比例][Flex Box_-Flex_-flex-shrink 2]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[Flex Box_-Flex_-flex-shrink]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/599e70c6bbf04a85906261ad9201d181.png
[Flex Box_-Flex_-flex-shrink 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c67e314461b54ef79e8f7d42415c0c3a.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[Flex Box_-Flex_-flex-shrink 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cc27fd41106e4983b34b6cb7941e4bd7.png