今天看到關(guān)于flex-shrink的題目本橙，發(fā)現(xiàn)自己算的一直有問(wèn)題握础，所以找到了一個(gè)回答比較清晰的記錄一下
題目來(lái)源
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 500px;
background: red;
}
.right {
flex: 2 1 400px;
background: blue;
}
</style>
子元素的 flex-shrink 的值分別為 2，1
溢出：500 + 400 - 600 = 300扫尖。
總權(quán)重為 2 * 500 + 1 * 400 = 1400
兩個(gè)元素分別收縮：
300 * 2(flex-shrink) * 500(width) / 1400= 214.28
300 * 1(flex-shrink) * 400(width) / 1400= 85.72
三個(gè)元素的最終寬度分別為：
500 - 214.28 = 285.72
400 - 85.72 = 314.28
總結(jié)下就是
(溢出寬/高度 x 當(dāng)前元素的收縮量 * 當(dāng)前元素的寬度) / 總權(quán)重
總權(quán)重 = 第一個(gè)元素的收縮量 * 第一個(gè)元素的寬/高度 + 第二個(gè)元素的收縮量 * 第二個(gè)元素的寬/高度 + ...
