微信小程序flex box界面设计入门到精通-10课-Flex项目的属性-flex-shrink项目的缩小比例

.item { flex-shrink: <number>; /* default 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;/*每个方框的外边距*/

}

.fangxing1{

  width: 300rpx; height: 300rpx; 

  background-color:  #f5f5dc;

  margin: 5px;/*每个方框的外边距*/

  flex-shrink: 0;
}