多个盒子，flex-shrink以为值的时候，该如何计算呢？
来源：4-11 flex-shrink收缩比例
怒焰狂暴
2021-08-15
2回答
-
西门老舅
2021-08-15
同学你好，这个收缩比例如果是小数，也是按照我视频中说的方式进行换算。
具体以你给的代码进行换算如下：
溢出部分大小 -> 300 + 400 - 500 -> 200
由于一个占0.3，一个占0.5，因此不能完全收缩，收缩的部分为 溢出大小即上面的200 * (0.3 + 0.5) -> 160
因此有200 - 160 > 40 个像素会溢出盒子
现在来观察两个子项的比例，400 是 0. 3 ， 300 是 0.5 ，所以根据视频中的换算比例为 1200 比 1500 ，及12 : 15
第一个子项的最终宽度为：400 - 12/27 * 160 -> 328.8888888888889
第二个子项的最终宽度为：300 - 15/27 * 160 -> 211.11111111111111
祝您学习愉快~
062021-08-16 -
怒焰狂暴
提问者
2021-08-15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width:500px;
height:500px;
background:skyblue;
display:flex;
}
.main div:nth-child(1){
width:400px;
height:100px;
background:tomato;
flex-shrink:0.3;
}
.main div:nth-child(2){
width:300px;
height:100px;
background:tomato;
flex-shrink:0.5;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
00
相似问题