關於伸縮盒子 flexbox 的flex-shrink屬性

注：今天在用swiper.js做商品輪播圖的時候，遇到了在使用flexbox的前提下，子元素設置flex:1;所有子元素被擠在一期的現象（未執行到swipe）；

原因竟然是因為沒有設置：flex-shrink屬性。

flex-shrink：<number>

默認值：1

適用於：flex子項

繼承性：無

動畫性：是

計算值：指定值

取值：

<number>： 用數值來定義收縮比率。不允許負

說明：

設置或檢索彈性盒的收縮比率。

• 根據彈性盒子元素所設置的收縮因子作為比率來收縮空間。

  <ul class="flex">
      <li>a</li>
      <li>b</li>
      <li>c</li>
  </ul>
  
  .flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}
  .flex li{width:200px;}
  .flex li:nth-child(3){flex-shrink:3;}

  flex-shrink的默認值為1，如果沒有顯示定義該屬性，將會自動按照默認值1在所有因子相加之后計算比率來進行空間收縮。
  
  本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據默認值1來計算，可以看到總共將剩余空間分成了5份，其中a占1份，b占1份，c占3分，即1:1:3
  
  我們可以看到父容器定義為400px，子項被定義為200px，相加之后即為600px，超出父容器200px。那么這么超出的200px需要被a,b,c消化
  
  通過收縮因子，所以加權綜合可得200*1+200*1+200*3=1000px；
  於是我們可以計算a,b,c將被移除的溢出量是多少：
  a被移除溢出量：(200*1/1000)*200，即約等於40px
  b被移除溢出量：(200*1/1000)*200，即約等於40px
  c被移除溢出量：(200*3/1000)*200，即約等於120px
  最后a,b,c的實際寬度分別為：200-40=160px, 200-40=160px, 200-120=80px

  • 對應的腳本特性為flexGrow。