前言

​​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份，B​​1​​份，C​​2​​份，比例就是​​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​​无效。

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

​