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

代码示例

小白教程网www.2d5.net

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

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

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

1.默认代码和效果

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

.wxml文件代码示例

小白教程网www.2d5.net

<view>
  <view>
    <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

.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;/*每个方框的外边距*/
}

效果如图7-39所示。

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

.wxss文件代码示例

小白教程网www.2d5.net

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

效果如图7-40所示。