关于flex-shrink计算：再深刻一点点

引子

有关于 flex-shrink，flex-grow 属性，是如何计算的，前人已经有了不少总结，本篇是在本人学习flex过程当中遇到问题后，再进行思考，对这两个属性的进一步拓展。

前人总结的计算公式

首先看一下主要的HTML结构：

<section class='container'>
	<div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</section>
复制代码

再看一下主要的LESS设置：

.container{
    dispaly: flex;
    flex-basis: 600px;
    height: 100px;
    .item{
        &:nth-child(1){
            flex-shrink: 1;
            flex-basis: 200px;
        }
        &:nth-child(2){
            flex-shrink: 3;
            flex-basis: 600px;
        }
        &:nth-child(3){
            flex-shrink: 1;
            flex-basis: 400px;
        }
    }
}
复制代码

最终效果图以下：

根据已有的结论，与效果图，咱们给出前人的计算公式：

• ：容器的宽度

• ： 容器中第个项目的真实宽度

• ：容器中第个项目通过flex伸缩变化以后最终的宽度

• : 容器中第个项目所占有的伸缩系数flex-shrink

• : 求和函数，求到的表达式的和

有以上定义以后，便可得出公式：

例如：

同上可有：

padding 与margin

让咱们稍微改动一下LESS，查看存在 padding 时的盒子的宽度：

.container.padding{
    .item{
        padding: 100px;
        &:nth-child(1){
            flex-shrink: 1;
            flex-basis: 200px;
        }
        &:nth-child(2){
            flex-shrink: 5;
            flex-basis: 800px;
        }
        &:nth-child(3){
            flex-shrink: 1;
            flex-basis: 400px
        }
    }
}
复制代码

最终的效果图以下：

仔细观察能够发现，加了 padding 以后， padding 值并未受到影响，减少的仅仅是盒子的真实宽度，如图第二个div的宽度彻底由 padding 组成：

由此特性便可推导出新的特性：

• : 容器中第个项目的盒子宽度（），由真实宽度加上全部边距组成

因而有新公式：

咱们带入计算可有：

同理有：

诶，等一下，好像有哪里不对？？？和显示的数值不太同样。第一个盒子，明明是175px，第二个盒子，明明是100px，如今须要讲讲下一个特性

min-width 对 flex-shrink 的影响

在写文档以前曾有过这样的一段LESS设置：

.container.min-width{
    .item{
        flex-basis: 600px;
        &:nth-child(1){
            flex-shrink: 1;
        }
        &:nth-child(2){
            flex-shrink: 3;
            min-width: 150px;
        }
        &:nth-child(3){
            flex-shrink: 2;
        }
    }
}
复制代码

获得的效果图以下：

此时第一个盒子能够推算出：

能够推出，在min-width被触发的时候，被触发的项目的flex-shrink的值应该为0，计算项目的总宽度时，触发min-width的项目宽度值，取为min-width属性值

咱们能够尝试上面获得的结论去计算刚刚的padding，因为padding不会受到影响，因此盒子的最小宽度只能是100px，而那时候min-width被触发了，此时min-width为0：

计算公式终于正确了！

其实咱们对以前错误的计算方式这样看（即，flex-shrink形变后的项目的宽度由各个边距的宽度加上项目形变后的真实宽度）：

这样计算第二个项目时就能发现问题所在：

项目的真实宽度width属性值在通过形变以后竟然变成了负值，这显然是不正确的。因此可推导出flex-shrink的变化，最多只可以使得项目的width的值与min-width一致。

结论

综上所述，咱们最后能够来一个终极公式了：

• ：容器的宽度

• ： 容器中第个项目的真实宽度，width、flex-basic属性决定

• : 容器中第个项目的盒子宽度（），由真实宽度加上全部边距组成

• ：容器中第个项目通过flex伸缩变化以后最终的宽度，咱们要求的值

• : 容器中第个项目所占有的伸缩系数flex-shrink

• : 求和函数，求到的表达式的和

• : 描述min-width被触发的特殊状况，当flex-shrink形变后的某一项计算获得的width === min-width时，该项的flex-shrink变成0，也变成min-width，每个项目将从新计算

有公式：

结语

啰里啰唆讲了这么多，但愿有看客能理解其中的意思。若有不合理之处还望指正。flex-grow的计算与flex-shrink十分类似，其特殊的地方应该在max-width值的设置处。

参考

• 深刻理解 flex-grow、flex-shrink、flex-basis

• 关于flex-shrink如何计算的冷知识

• flex规范