flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item { flex-shrink: <number>; /* default 1 */ }
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
<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>
.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;/*每个方框的外边距*/
}
Wxss代码
.fangxing1{
width: 300rpx; height: 300rpx;
background-color: #f5f5dc;
margin: 5px;/*每个方框的外边距*/
flex-shrink: 0;
}