位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 缩小比例(flex-shrink)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 放大比例(flex-grow) 下一篇: 项目占据的主轴空间(flex-basis)

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所示。

image.png


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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-40所示。

image.png




上一篇: 放大比例(flex-grow) 下一篇: 项目占据的主轴空间(flex-basis)
毕业设计网             广告联系QQ:45157718(微信同号)