深入理解 flex-grow & flex-shrink & flex-basis

前言

flex 有三个属性值，分别是 flex-grow， flex-shrink， flex-basis，默认值是 0 1 auto。 发现网上详细介绍他们的文章比较少， 今天就详细说说他们，先一个一个看。

flex-grow

定义项目的放大比例，默认值为0，就算存在剩余空间，也不会放大。单单几句话肯定不能表达出意思，来看个DEMO。

flex-grow

flex-grow的默认值为0，如果没有定义该属性，是不会拥有分配剩余空间的权利的。A, B, C, D, E 的宽度分别是 100, 120, 130, 100, 100，父级的宽度是660，父级宽减去子级的全部宽度，这样剩余空间就是110。例子中B, C定义了flex-grow，分别是1，2，那剩余空间分成3份，B1份，C2份，比例就是1：2，分配计算出来的值就是B :36.666666666666664, C：73.33333333333333。这个时候剩余空间就被计算出来了，相加后的结果就是B：156.66666666666666，C：203.33333333333331。

B的计算公式：120 + (110 / 3) * 1

C的计算公式: 130 + (110 / 3) * 2

flex-shrink

定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，看例子。

flex-shrink

这里 A, B, C 的宽度分别是155, 200, 50，(注意这里的宽度我是用flex-basis代替的，在这个例子中和width的作用是一样的)。 父级宽度是300，计算超出的空间就是 -105，这样超出的 105px 就要被 A, B, C 消化掉，比例是2：1：1。

如何消化 ？ 首先是每个项目的wdith值乘以flex-shrink值求积，

A：(155 * 2) = 310
B：(200 * 1) = 200
C：(50 * 1) = 50。

然后再求和所有项目的乘积。

(310 + 200 + 50) = 560

得到求占比之后还要乘以要腾出的空间。

A：(310 / 560) * 105 = 58.125
B：(200 / 560) * 105 = 37.5
C：(50 / 560) * 105 = 9.375

得到每一项要腾出的空间後然後

A：(155 - 58.125) = 96.875
B：(200 - 37.5) = 162.5
C：(50 - 9.375) = 40.625

好了，这样就得出计算后的宽度了。

flex-basis

和width一样，他的默认值为auto，把上面几个例子换成width也是一样的。当然工作中最好用flex-basis，更符合规范。

总结

如果父级的空间足够：flex-grow有效，flex-shrink无效。

如果父级的空间不够：flex-shrink 有效，flex-grow无效。

如果你有疑问欢迎讨论，一起学习。

原文：https://xiecg.github.io/2016/...