关于flex布局里flex-shrink如何计算
<!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:300px;
background:skyblue;
display:flex;
}
.main div:nth-child(1){
width:300px;
height:150px;
background:pink;
flex-shrink:0.5;
}
.main div:nth-child(2){
width:500px;
height:150px;
background:pink;
flex-shrink:1;
}
</style>
</head>
<body>
<div class="main">
<div></div>
<div></div>
</div>
</body>
</html>
老师，能否根据以上代码，帮我讲解下第一个div和第二个div的值是如何计算出来的，这里有点小迷糊
源自：浮动与定位
3-8 绝对定位（2）
22
收起
正在回答
1回答
同学你好，对于你的问题解答如下：
（1）溢出空间部分为：项目的宽度之和 - 容器的宽度，即： 300px+500px-500px = 300px
（2）计算总权重：每个项目的宽度乘以flex-shrink系数的总和。即：300*0.5+500*1 = 650px
（3）计算每个项目的收缩空间为：溢出空间 *(项目宽度 * flex-shrink / 总权重)
项目1收缩空间： 300 * (300 * 0.5 / 650 )约等于 69.231
项目2收缩空间： 300 * (500 * 1 / 650 ) 约等于 230.769
（4）每个项目的实际宽度： 设置的width值 - 项目的收缩空间
项目1宽度： 300 - 69.231= 230.769
项目2宽度： 500 - 230.769 = 269.231
祝学习愉快！
相似问题
以下注释里的值如何计算，flex布局
35
1
3
用flex布局，可以不用栅格布局吗？
40
0
3
这个基础课没有flex布局内容吗
15
0
3
这里为什么不使用flex布局
15
0
3
flex和flex-grow的区别？
11
0
3
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星