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

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86179976

flex-shrink项目的缩小比例

基础语法

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

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

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

小程序应用

默认代码和效果
效果如

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

Wxml代码

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

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
效果如图

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

Wxss代码

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

微信小程序样式Flex Box精通课程 https://edu.csdn.net/course/detail/10624

扫描二维码关注公众号，回复： 4899339 查看本文章