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