flex佈局中flex-grow與flex-shrink的計算方式
CSS 中的 Flex(彈性佈局) 可以很靈活的控制網頁的佈局，其中決定 Flex 佈局內專案寬度/高度的是三個屬性：
flex-basis, flex-grow, flex-shrink.
flex-basis
flex-basis 決定了專案佔據主軸的空間，除非使用 box-sizing 進行設定，否則它將設定內容框的大小，因此當你指定一個flex項的大小時需要額外小心，因為它很肯能包含內邊距與邊框。
你可以為其指定一個具體的CSS尺寸值，也可以指定其佔據父元素的百分比，它的預設值為 auto(根據內容自動調整大小)
<!-- demo-1 --> <div class="parent"> <div class="child1">100px</div> <div class="child2">200px</div> </div> <div class="parent"> <div class="child1">10%</div> <div class="child2">20%</div> </div> <div class="parent"> <div class="child1">30%</div> <div class="child2">auto</div> </div> <style> .parent { width: 500px; display: flex; margin-bottom: 15px; text-align: center; background-color: #eeeeee; } /** 畫素值*/ .parent:nth-child(1) .child1 { flex-basis: 100px; background-color: #356969 } .parent:nth-child(1) .child2 { flex-basis: 200px; background-color: #369925; } /** 百分比 */ .parent:nth-child(2) .child1 { flex-basis: 10%; background-color: #356969 } .parent:nth-child(2) .child2 { flex-basis: 20%; background-color: #369925; } /** 自動 */ .parent:nth-child(3) .child1 { flex-basis: 30%; background-color: #356969 } .parent:nth-child(3) .child2 { flex-basis: auto; background-color: #369925; } </style>
flex-grow
flex-grow 設定當 flex 容器存在剩餘空間(flex容器的大小減去所有flex項的大小之和)時專案的放大比例，它的預設值為 0 (即使存在剩餘空間也不放大)。如果所有專案的 flex-grow 屬性值都是相同的，則它們將等分剩餘空間，否則，將根據不同的屬性值所定義的比率進行分配。
例如，主軸長度為600px, 專案1佔據50px, 專案2佔據100px, 專案3佔據150px, 則剩餘空間為：600px - (50px + 100px + 150px) = 300px
假如每個專案的 flex-grow 屬性值都相同(例如都為1)，則所有專案分配到相同的剩餘空間：
- 專案1: 300px * (1 / (1 + 1 + 1)) = 100px;
- 專案2: 300px * (1 / (1 + 1 + 1)) = 100px;
- 專案3: 300px * (1 / (1 + 1 + 1)) = 100px;
<!-- demo-2 --> <div class="parent"> <div class="child1">50px + 100px</div> <div class="child2">100px + 100px</div> <div class="child3">150px + 100px</div> </div> <style> .parent { width: 600px; display: flex; text-align: center; color: #eee; } .child1 { flex-basis: 50px; flex-grow: 1; background-color: #0066CC; } .child2 { flex-basis: 100px; flex-grow: 1; background-color: #009900; } .child3 { flex-basis: 150px; flex-grow: 1; background-color: #CC3300; } </style>
假設每個專案的 flex-grow 屬性的值並不都是相同的，例如專案1為 1, 專案2為 2, 專案3為 3, 則它們分配到的剩餘空間分別為：
- 專案1: 300px * (1 / (1 + 2 + 3)) = 50px;
- 專案2: 300px * (2 / (1 + 2 + 3)) = 100px;
- 專案3: 300px * (3 / (1 + 2 + 3)) = 150px;
<!-- demo-3 -->
<div class="parent">
<div class="child1">50px + 50px</div>
<div class="child2">100px + 100px</div>
<div class="child3">150px + 150px</div>
</div>
<style>
.parent {
width: 600px;
display: flex;
text-align: center;
color: #eee;
}
.child1 {
flex-basis: 50px;
flex-grow: 1;
background-color: #0066CC;
}
.child2 {
flex-basis: 100px;
flex-grow: 2;
background-color: #009900;
}
.child3 {
flex-basis: 150px;
flex-grow: 3;
background-color: #CC3300;
}
</style>
要是屬性值為小數怎麼辦呢？這裡分兩種情況：
1. 所有flex項的 flex-gorw 屬性值之和大於1，仍然按照上述方式進行計算；
2. 所有flex項的 flex-gorw 屬性值之和小於1，基值按照1來進行計算，例如專案1為 0.2, 專案2為 0.3, 專案3為 0.4, 則它們分配到的剩餘空間分別為：
- 專案1: 300px * (0.2 / 1) = 60px;
- 專案2: 300px * (0.3 / 1) = 90px;
- 專案3: 300px * (0.4 / 1) = 120px;
<!-- demo-4 -->
<div class="parent">
<div class="child1">50px + 60px</div>
<div class="child2">100px + 90px</div>
<div class="child3">150px + 120px</div>
</div>
<style>
.parent {
width: 600px;
display: flex;
text-align: center;
color: #eee;
}
.child1 {
flex-basis: 50px;
flex-grow: 0.2;
background-color: #0066CC;
}
.child2 {
flex-basis: 100px;
flex-grow: 0.3;
background-color: #009900;
}
.child3 {
flex-basis: 150px;
flex-grow: 0.4;
background-color: #CC3300;
}
flex-shrink
flex-shrink 設定當 flex 容器空間不足時專案的放大比例，它的預設值為 1 (空間不足時該專案將縮小)。
flex-shrink 的計算方式與 flex-grow 略有不同，有兩個因素影響 flex 項該縮小多少，一個是 flex-shrink 的屬性值，另一個是 flex 項本身的大小，它們按各自的權重進行縮小，舉例來說：
主軸長度為600px, 專案1佔據100px, 專案2佔據300px, 專案3佔據500px, 每個專案的 flex-shrink 屬性值分別為1,3,2, 則總權重為 100px * 1 + 300px * 3 + 500px 2 = 2000px, 每個專案的權重分別為為：
- 專案1: (100px 1) / 2000px = 0.05;
- 專案2: (300px * 3) / 2000px = 0.45;
- 專案3: (500px * 2) / 2000px = 0.50;
溢位的空間長度為：100px + 300px + 500px - 600px = 300px;
那麼每個專案分別縮小：
- 專案1: 300px * 0.05 = 15px;
- 專案2: 300px * 0.45 = 135px;
- 專案3: 300px * 0.50 = 150px;
<!-- demo-5 -->
<div class="parent">
<div class="child1">100px - 15px</div>
<div class="child2">300px - 135px</div>
<div class="child3">500px - 150px</div>
</div>
<style>
.parent {
width: 600px;
display: flex;
text-align: center;
color: #eee;
}
.child1 {
flex-basis: 100px;
flex-shrink: 1;
background-color: #0066CC;
}
.child2 {
flex-basis: 300px;
flex-shrink: 3;
background-color: #009900;
}
.child3 {
flex-basis: 500px;
flex-shrink: 2;
background-color: #CC3300;
}
</style>
同樣的，當 flex-shrink 的值為小數時，也分兩種情況：
1. 所有flex項的 flex-shrink 屬性值之和大於1，仍然按照上述方式進行計算；
2. 所有flex項的 flex-shrink 屬性值之和小於1，只收縮溢位空間的一部分，例如專案1為 0.1, 專案2為 0.3, 專案3為 0.2, 則總的收縮空間為：
300px * (0.1 + 0.3 + 0.2) = 180px
每個項的權重計算方式是不變的，每個專案分別縮小：
- 專案1: 180px * 0.05 = 9px;
- 專案2: 180px * 0.45 = 81px;
- 專案3: 180px * 0.50 = 90px;
<!-- demo-6 -->
<div class="parent">
<div class="child1">100px - 9px</div>
<div class="child2">300px - 135px</div>
<div class="child3">500px - 90px</div>
</div>
<style>
.parent {
width: 600px;
display: flex;
text-align: center;
color: #eee;
}
.child1 {
flex-basis: 100px;
flex-shrink: 0.1;
background-color: #0066CC;
}
.child2 {
flex-basis: 300px;
flex-shrink: 0.3;
background-color: #009900;
}
.child3 {
flex-basis: 500px;
flex-shrink: 0.2;
background-color: #CC3300;
}
</style>
由於只收縮了溢位空間的一部分，div 內的元素總寬度實際上是超出 div 的寬度的。
以上就是關於使用flex佈局中 flex-grow 與 flex-shrink 計算方式的簡單介紹。
該篇部落格內的程式碼已同步到Github
參考資料：
[1]. MDN文件 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
[2]. MDN文件 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
[3]. MDN文件 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shr