关于flex布局里flex-shrink如何计算
1 | <!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta http-equiv="X-UA-Compatible" content="IE=edge"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> .main{<br> width:500px;<br> height:300px;<br> background:skyblue;<br> display:flex;<br> }<br> .main div:nth-child(1){<br> width:300px;<br> height:150px;<br> background:pink;<br> flex-shrink:0.5; <br> }<br> .main div:nth-child(2){<br> width:500px;<br> height:150px;<br> background:pink;<br> flex-shrink:1;<br> }<br> </style><br></head><br><body><br> <div class="main"><br> <div></div><br> <div></div><br> </div><br></body><br></html><br><br>老师，能否根据以上代码，帮我讲解下第一个div和第二个div的值是如何计算出来的，这里有点小迷糊<br><br><br><br><br><br> |
源自：浮动与定位
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积分~
来为老师/同学的回答评分吧