flex-shrink是flex体系中比较难理解的一个属性，今天来看一下。

文档

http://www.css88.com/book/css/properties/flex/flex-shrink.htm

flex-shrink只在元素需要瘦身的前提下才生效，否则等于白写。

题1，常规算法

求a、b、c、d四元素的宽度。

<style>
.father {
    display: flex;
    width: 800px;
    height: 300px;
}
.a {
    flex-shrink: 1;
    width: 50px;
    background: #ff00ff;
}
.b {
    width: 300px;
    background: #ff0000;
}
.c {
    flex-shrink: 2;
    width: 50px;
    background: #0000ff;
}
.d {
    width: 600px;
    background: #00ff00;
}
</style>
<div class="father">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item d"></div>
</div>

解：

b和d元素没有声明flex-shrink，所以默认为flex-shrink: 1。

目前子元素总宽度是1000px，父容器是800px，有200px需要消化掉。

表面上，从flex-shrink的值来看，a占1份，b占1份，c占2份，d占1份，一共5份。

这里说一种错误理解：如果你以为，一份是200px/5=40px，所以各个元素减肥掉1份40px，或者减肥掉2份40px就可以了，那就错了。

应该怎么算？怎么理解flex-shrink的值？

首先明确flex-shrink的值的含义，最通俗的解释是，flex-shrink就是减肥的强度，而不是斤数。也就是说，别的元素一天要跑1小时，C元素要跑2个小时，别的元素一天要做100个俯卧撑，C元素要做200个俯卧撑。但绝对不是说，别的元素要减40斤，C必须减80斤。道理很简单，减肥也要考虑原本的体重，对不对？有的元素是成年人，减40斤不是问题，而C只是一个小孩子，如果让C减80斤，很可能减成了负值了。

所以记住一句话，flex-shrink就是减肥的强度，而不是斤数。

正确算法应该是：

求减肥总权重：50 * 1 + 300 * 1 + 50 * 2 + 600 * 1 = 1050，因为C要贡献2份强度，所以乘以2。

A应该瘦身：200 * (50 / 1050) = 9.523px，瘦身之后是50 - 9.523 = 40.476px

B应该瘦身：200 * (300 / 1050) = 57.143px，瘦身之后是300 - 57.143 = 242.857px

C应该瘦身：200 * (50 * 2 / 1050) = 19.048px，瘦身之后是50 - 19.048 = 30.952px

D应该瘦身：200 * (600 / 1050) = 114.285px，瘦身之后是600 - 114.285 = 485.714px

题2，当某元素width为百分比值

如果某个元素的宽度为百分比，会是怎样？

<style>
    .father {
        display: flex;
        width: 800px;
        height: 300px;
    }
    .a {
        flex-shrink: 1;
        width: 50%;
        background: #ff00ff;
    }
    .b {
        width: 300px;
        background: #ff0000;
    }
    .c {
        flex-shrink: 2;
        width: 50px;
        background: #0000ff;
    }
    .d {
        width: 100px;
        background: #ff8800;
    }
</style>
<div class="father">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item d"></div>
</div>

怎么算？其实很简单，先把宽度百分比乘以父元素宽度，算出px值，之后的计算跟题1一致。为了验证，我还是计算一遍吧。

解：

A元素的width是400px。

然后我们计算需要减肥多少：

400 + 300 + 50 + 100 - 800 = 50px

减肥总权重为：

400 * 1 + 300 * 1 + 50 * 2 + 100 * 1 = 900

A应该瘦身：50 * (400 / 900) = 22.22px，瘦身之后是400 - 22.22 = 377.77px

B应该瘦身：50 * (300 / 900) = 16.66px，瘦身之后是300 - 16.66 = 283.33px

C应该瘦身：50 * (50 * 2 / 900) = 5.55px，瘦身之后是50 - 5.55 = 44.44px

D应该瘦身：50 * (100 / 900) = 5.55px，瘦身之后是100 - 5.55 = 94.44px

题3，当某元素flex-shrink为0

某元素flex-shrink为0意味着它不参与减肥，所以整个减肥算法都要排除掉该元素，也就是说把该元素视为不变形的刚体就行了。

验算从略，你可以试试给题2的b元素添加flex-shrink: 0。

题4，当flex-shrink值为小数

flex-shrink值为小数跟为整数是一样的道理，算法完全一样。

给题2的b元素设上flex-shrink: 0.5测试一下，只计算b元素。

解：

需要减肥的量还是50px。

总权重是：400 * 1 + 300 * 0.5 + 50 * 2 + 100 * 1 = 750

b需要减肥50 * (300 * 0.5 / 750) = 10px，减肥之后是300 - 10 = 290px。

实测一下，正确。

题5，全部元素不设flex-shrink

全部不设flex-shrink，则视为全部元素的flex-shrink为1，这样的话，计算方式最简单，全部元素都等比压缩。