【flex-shrink】计算 flex弹性盒子的子元素的宽度大小
计算以下两个子div的宽度大小：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div0 {
width: 400px;
height: 500px;
background-color: aqua;
display: flex;
}
#div0 div {
width: 200px;
height: 200px;
}
#div0 div:nth-child(1) {
flex-basis: 30%;
flex-shrink: 1;
background-color: blue;
}
#div0 div:nth-child(2) {
flex-basis: 90%;
flex-shrink: 3;
background-color: rgb(255, 251, 0);
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
</div>
</body>
</html>
解析：
1、计算元素的溢出的部分
因为我们flex-basis用的百分比 ，首先先计算各占多少像素
元素一：0.3*400=120
元素二:0.9*400=360
所以他们两者总大小为：480
溢出部分：480-400=80
2、计算他们的总权重值
120*1+360*3=1200
3、分别计算收缩量
元素一：80*1*(120/1200)=8
元素二：80*3*(360/1200)=72
4、计算他们的大小
元素一：120-8=118
元素二：360-72=288