flex-shrink 的一个问题
描述
看如下代码，同时设置子元素的 flex-shrink 和 宽度 width 会出现什么情况
相关代码
<!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>
.container {
width: 200px;
height: 100px;
display: flex;
}
.box {
height: 100px;
}
.box1 {
flex-shrink: 2;
width: 100px;
background-color: gold;
}
.box2 {
flex-shrink: 2;
width: 50px;
background-color: red;
}
.box3 {
flex-shrink: 1;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
</html>浏览器显示结果
黄色盒子（box1）为 75px
红色盒子（box2）为 37.5px
蓝色盒子（box3）为 87.5px
为什么？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
三个item的宽度之和是250px,父容器200px,相差-50px.
需要每个item缩减来分配这个差值.如何缩减则按flex-shrink计算.
计算方式是先求所有item
flex-shrink * flex-basis(width)之和,100 * 2 + 50 * 2 + 100 * 1=400再计算每个item在这个和中的占比
本例中为
0.5 0.25 0.25用这个比例分配差值(债务分配)
本例中为
25px 12.5px 12.5px本例定义了父容器宽（即主轴宽）为
200px，由于子元素设置了伸缩基准值flex-basis，100+50+100=250，那么子元素将会溢出250-200=50px；由于同时设置了收缩因子，所以加权综合可得
100*2+50*2+100*1=400px；于是我们可以计算
box1,box2,box3将被移除的溢出量是多少：box1被移除溢出量：(100*2/400)*50，即约等25pxbox2被移除溢出量：(50*2/400)*50，即约等于12.5pxbox3被移除溢出量：(100*1/400)*100，即约等于12.5px最后
box1,box2,box3的实际宽度分别为：100-25=75px,50-12.5=37.5px,100-12.5=87.5px