当前阅读教程:Flex Box小程序应用 > 缩小比例(flex-shrink) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 放大比例(flex-grow) | 下一篇: 项目占据的主轴空间(flex-basis) |
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 代码示例 如下: .item { flex-shrink: <number>; /* default 1 */ } 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。 1.默认代码和效果父容器设定了flex模式后,其内部的子元素默认都是按等比例缩小的。 .wxml文件代码示例 如下: <view> <view> <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;/*每个方框的外边距*/ } 效果如图7-39所示。 下面我们设置01区块的flex-shrink的值为0(0表示不缩小,默认值1表示缩小),其他区块不变;我们只需要改造01区块对应的样式(样式类名fangxing1)代码即可。 .wxss文件代码示例 如下: .fangxing1{ width: 300rpx; height: 300rpx; background-color: #f5f5dc; margin: 5px;/*每个方框的外边距*/ flex-shrink: 0; } 效果如图7-40所示。 |
|
上一篇: 放大比例(flex-grow) | 下一篇: 项目占据的主轴空间(flex-basis) |