flex-shrink计算上的一些细节

最新推荐文章于 2024-08-09 21:30:00 发布

凌凌_2023

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量426

点赞数 7

文章标签：前端 css3

本文链接：https://blog.csdn.net/qq_41974279/article/details/135818197

版权

文章讲述了在使用flexbox布局时，由于box-sizing属性和border的影响导致的宽度计算问题。作者揭示了在计算flex-shrink时应使用content-box的宽度，而非border-box，解释了浏览器对小数处理的差异，尽管误差微小，但理解这一细节有助于开发者优化布局。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .test {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
        }
        .test .content {
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid red;
        }
        .content.unique {
            width: 400px;
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content unique">3</div>
    </div>
</body>
</html>

在这个环境下，先计算一下每个盒子压缩之后的宽度，首先，三个盒子的宽度比为 200:200:400，即 1:1:2，乘以其各自的 flex-shrink，得到的比例为 1:1:6，所以超出的比例是按照 1:1:6的比例压缩的，容器宽度为 600，弹性项总宽度为 800，超出了 200，这 200 分成 1+1+6=8 份，每一份 25像素，1 号占一份，被压缩 25 像素，宽度为 200-25=175 像素，2 号占 1 份，被压缩 25 像素，也剩 175 像素，三号占 6 份，被压缩 150 像素，宽度为 400-150=250 像素

在这里插入图片描述

但最终结果却不尽如意，我们会发现这里每一个盒子和我们算出来的虽然大差不差，但总会有那么一丢丢误差。

在这里插入图片描述

如果我在控制台取消掉 box-sizing:border-box; 以及 border 属性之后，发现其结果又正常了。这里其实就是计算上的一个细节，在计算权重的时候，我们需要把盒子宽度的比值和其对应的 flex-shrink 乘起来，得到最终的权值，但这个盒子宽度的比值应该是盒子内容区宽度的比值，或者说是 content-box 的宽度，而非 border-box 的宽度。

在上面的例子中，由于有 1 像素的边框，所以盒子内容区宽度的比值应该是 198:198:398，乘以对应的 flex-shrink 应该是 198:198:1194，超出来的这 200 像素会按照这个比例被压缩，即第一个盒子压缩 (198/1590)*200, 剩下 175.09433962264150943396226415094 px，第二个盒子也一样，第三个盒子被压缩 (1194/1590)*200，剩下 249.81132075471698113207547169811 px，

读者可以看到，这已经很接近实际的数字了，但总会差那么一丁点，这实际上就是浏览器本身的问题了，因为不同浏览器其最终渲染效果也各不相同，主要的差异是对 CSS 中小数的处理，例如 chrome 中前两个盒子的宽度都是 175.09 px，第三个盒子为 249.83 px，这一点和上面 firefox 的数值就不一样，但这一丁点误差也并不会影响开发，读者只需要理解，在计算最终比值时所用到的宽度应该是 content-box 的，而非 border-box。

凌凌_2023

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
flex-shrink计算上的一些细节

得到的比例为 1:1:6，所以超出的比例是按照 1:1:6的比例压缩的，容器宽度为 600，弹性项总宽度为 800，超出了 200，这 200 分成 1+1+6=8 份，每一份 25像素，1 号占一份，被压缩 25 像素，宽度为 200-25=175 像素，2 号占 1 份，被压缩 25 像素，也剩 175 像素，三号占 6 份，被压缩 150 像素，宽度为 400-150=250 像素。在上面的例子中，由于有 1 像素的边框，所以盒子内容区宽度的比值应该是 198:198:398，乘以对应的。
复制链接

扫一扫