flex-grow，flex-shrink 缩放比例详解

一、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果设定了flex-grow，当容器有剩余空间时，凡是flex-grow大于0的项目将一起瓜分剩余空间，每个项目所分到的剩余空间，跟项目自身的大小无关，只跟各项目设定的flex-grow和剩余空间有关。

如下例子，parent宽度 大于 son1+son2设定的宽度，计算son1放大后的宽度：

son1最终渲染宽度 = son1设定宽度 + 应放大宽度

（1）先获取剩余空间： parent宽度 - （son1设定宽度 + son2设定宽度）

300 - (120 + 140) = 40px

（2）应放大宽度 = 剩余空间 * 占比
        占比 = son1的flex-grow / （son1的flex-grow + son2的 flex-grow）

son1应放大宽度 = 40*1.5/(1+1.5)  = 24

son1最终渲染宽度 = 120px + 40*1.5/(1+1.5) = 144px

<div class="parent">
    <div class="son son1">1</div>
    <div class="son son2">2</div>
</div>


.parent {
    display: flex;
    width: 300px;
    height: 300px;
    background: #fff;
    border: 1px solid #999;
    .son {
        &.son1 {
            background: blue;
            flex-basis: 120px;
            flex-grow: 1.5;
        }
        &.son2 {
            background: #f9ff33;
            flex-basis: 140px;
            flex-grow: 1;
        }
    }
}

二、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不同于flex-grow，如果设定了flex-shrink，当容器空间不足时， 每个项目收缩的空间，不仅跟项目设定的flex-shrink和总的收缩空间有关，还跟项目自身的大小有关。

• 容器剩余宽度：200 - (100+120+130) = -150
• 缩小因子的分母：1*100 + 2*120 + 3*130 = 730 (*前面的数字为各项目的flex-shrink值)
• son1的缩小因子：1*100/730
• son1的缩小宽度为缩小因子乘于容器剩余宽度：1*100/730 * (-150)
• son1最后则缩小为：100px + (1*100/730 * (-150)) = 79.45px

加入弹性元素本身大小作为计算方法的考虑因素，主要是为了避免将一些本身宽度较小的元素在收缩之后宽度变为0的情况出现。

<div class="parent">
    <div class="son son1">1</div>
    <div class="son son2">2</div>
    <div class="son son3">3</div>
</div>

.parent {
    display: flex;
    width: 200px;
    height: 300px;
    background: #fff;
    .son {
        &.son1 {
            background: blue;
            flex-basis: 100px;
            flex-shrink: 1;
        }
        &.son2 {
            background: yellow;
            flex-basis: 120px;
            flex-shrink: 2;
        }
        &.son3 {
            background: red;
            flex-basis: 130px;
            flex-shrink: 3;
        }
    }
}