【CSS筆記】flex-shrink的計算公式

# flex 物件的子物件的寬度，在沒設定寬的時候是多少？

事實上，flex 物件的子物件寬度，是由該物件內容寬度決定
例如下面的例子，將子項目 font-size 設定 20px
項目 a、b、c 分別是五個字、三個字、七個字
此時呈現結果將會是

• a 的寬度為 5 x 20 = 100px
• b 的寬度為 3 x 20 = 60px
• c 的寬度為 7 x 20 = 140px

.flex {

  width: 1000px;

  height: 300px;

  background-color: #ccc;

  display: flex;

}

.item {

  font-size: 20px;

}

.a {

  background-color: #cfa;

}

.b {

  background-color: #fac;

}

.c {

  background-color: #deb;

}

<div class="flex">

  <div class="item a">一二三四五</div>

  <div class="item b">一二三</div>

  <div class="item c">一二三四五六七</div>

</div>

# 子物件內容寬度超過父層 flex 寬度

這種情況下，子物件就會出現 flex-shrink 的效果，而每個子物件的 flex-shrink 值預設為 1
這也是 flex 設定下去，子物件不管放幾個，資料不管怎麼樣都會被限制在父層容器的主要原因

有趣的來了，綜合一開始所說的，flex 物件的子物件內容寬為自身寬度
但每個子物件的寬度加起來已經超過了父層寬度，子物件又會被限制的情況下
子物件就會依照比例與公式去計算出自身的寬度

計算步驟如下

1. 收縮比 = flex-shink 的值

2. 計算總比寬
   假設父層寬度為 1000px，子物件 A、B、C 分別是 600px、1000px、600px

   總比值 = (子項目A x 收縮比A) + (子項目B x 收縮比B) + (子項目C x 收縮比C)

   (600 x 1) + (1000 x 1) + (600 x 1) = 2200

3. 計算超出寬

   超出寬 = 總比值 - 父層寬度

   2200 - 1000 = 1200

4. 計算出每個子物件扣除寬

   子物件扣除寬 = (子項目寬 x 收縮比) / (總比值 x 超出寬)

   (600 x 1) / (2200 x 1200) = 327.2727272727

   (1000 x 1) / (2200 x 1200) = 545.4545454545

   (600 x 1) / (2200 x 1200) = 327.2727272727

5. 計算出子項目實際佔寬

   子項目實際寬度 = 子項目寬度 - 子物件扣除寬

   600 - 327.2727272727 = 272.7272727273

   1000 - 545.4545454545 = 454.5454545455

   600 - 327.2727272727 = 272.7272727273