以下注释里的值如何计算，flex布局

<!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> .main4{<br> width:500px;<br> height:200px;<br> background:skyblue;<br> margin-top:50px;<br> display:flex;<br> }<br> .main4 div:nth-child(1){<br> width:300px;<br> height:100px;<br> background:pink;<br> /* 283.64 */<br> flex-shrink:0.1; <br><br> }<br> .main4 div:nth-child(2){<br> width:400px;<br> height:100px;<br> background:pink;<br> /* 356.36 */<br> flex-shrink:0.2;<br> }<br> </style><br></head><br><body><br> <div class="main4"><br> <div></div><br> <div></div><br> </div><br></body><br></html><br>

怒焰狂暴 2021-08-15

源自：浮动与定位 3-9 固定定位

收起

1回答

好帮手慕然然 2021-08-16 10:41:46

同学你好，可以参考以下思路来理解：

首先，flex-shink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

其次，如果flex-shrink 的值为小数且所有flex项的 flex-shrink 属性值之和小于1，则只收缩溢出空间的一部分。

例如该段代码中，项目1为 0.1, 项目2为 0.2, 溢出空间部分为 300+400-500 = 200px，则总的收缩空间为：

200px * ( 0.1 + 0.2 ) = 60px，即只收缩60px。　　

然后，计算总权重：300*0.1+400*0.2 = 110（每个div的宽度乘以flex-shrink系数的总和）

最后，计算每个项目权重：（div的宽度*flex-shrink系数/总权重*需要收缩的总宽度）

项目1：300*0.1/110*60=0.27

项目2：400*0.2/110*60=0.73

每个项目分别缩小：
项目1：60px * 0.27 = 16.36px，最后的宽度300-16.36 = 283.64px
项目2：60px * 0.73 = 43.64px，最后的宽度400-43.64 = 356.36px

由于只收缩了溢出空间的一部分，div 内的元素总宽度实际上是超出 div 的宽度的。

祝学习愉快！

收起回答

提问者怒焰狂暴 #1

当一个值是整数，一个值为小数的时候，比如2和0.3的时候，这种方法好像就不行啦

2021-08-16 11:18:56
好帮手慕然然回复提问者怒焰狂暴 #2

同学你好，当一个值为整数，一个值为小数，此时所有flex项的 flex-shrink 属性值之和大于1，其计算规则发生变化，比如2和0.2，计算过程如下：
1、计算总权重：300*2+400*0.2 = 680（每个div的宽度乘以flex-shrink系数的总和）
2、计算每个项目的权重：（div的宽度*flex-shrink系数/总权重）
300*2/680 = 0.88
400*0.2/680 = 0.12
3、计算溢出的空间长度：300+400-500=200
那么每个项目分别缩小：
200*0.88 = 176 ——> 124px
200*0.12 = 24 ——> 376px
祝学习愉快！

2021-08-16 15:28:51