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

<!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>
        .main4{
            width:500px;
            height:200px;
            background:skyblue;
            margin-top:50px;
            display:flex;
        }
        .main4 div:nth-child(1){
            width:300px;
            height:100px;
            background:pink;
            /* 283.64 */
            flex-shrink:0.1; 

        }
        .main4 div:nth-child(2){
            width:400px;
            height:100px;
            background:pink;
            /* 356.36 */
            flex-shrink:0.2;
        }
    </style>
</head>
<body>
    <div class="main4">
        <div></div>
        <div></div>
    </div>
</body>
</html>

怒焰狂暴 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