flex: 1
flex: 1;是一个复合属性：flex-grow: 1; flex-shrink: 1; flex-basis: 0%；当flex的值不同只会对应修改flex-grow，即flex: n; => flex-grow: n flex-shrink: 1; flex-basis: 0%;。也可以分别定义：flex: 2 0 auto;
flex-basis
当前弹性元素的基础宽度（初始宽度）。默认值
flex-basis: auto。
flex-gorw
弹性盒子的所有子元素所占空间不能填满整个盒子的时候，会根据
flex-gorw指定的比例来分配剩余空间到各子元素。 默认值flex-grow: 0也就是当前弹性元素不参与伸展分配剩余宽度，保持原始宽度。 计算规则： 假设父级宽度为total，每个子元素的初始宽度为w，共有三个子元素（a，b，c），剩余宽度则为x；三个子元素的flex-gorw分别为：a:A, b:B, c:C。这里得到总权重sum=A+B+C。
a = w + x*A/sum
b = w + x*B/sum
c = w + x*C/sum
实例：
假设父级宽度为1000，每个子元素的初始宽度为100，共有三个子元素（a，b，c），剩余宽度则为500；三个子元素的
flex-gorw分别为：a:1, b:2, c:3。这里得到总权重sum=1+2+3。
a = 100 + 500*1/6
b = 100 + 500*2/6
c = 100 + 500*3/6
注意
- 当
sum<1的时候，sum=1来计算。这种情况则会有多余的剩余空间不会被分配给任何元素； flex-grow会受到max-width的影响。如果最终grow后的结果大于max-width指定的值，max-width的值将会优先使用。同样会导致父元素有部分剩余空间没有分配。
flex-shrink
弹性盒子的所有子元素所占空间
超出整个盒子的时候，会根据flex-shrink指定的比例来收缩子元素。默认值flex-shrink: 1，为0时该元素不收缩。 计算规则： 假设父级宽度为1000，有三个子元素他们的flex-shrink分别为：a:1, b:2, c:3，宽度分别为a:300, b:400, c:500，所以超出宽度为1000-(300+400+500) = -200。
// 先计算总权重（sum） = 各元素的flex-shrink*对应元素的原始宽度w，然后相加
// 超出的宽度为x = 200
// fs = 对应的flex-shrink
// 收缩后的宽度 = w - (x*fs*w/sum)
let sum = 300*1+400*2+500*3;
a = 300 - 200*1*300/sum
b = 400 - 200*2*400/sum
c = 500 - 200*3*500/sum
当 flex-shrink 之和小于 1 的时候，代表没有完全收缩，收缩完后还是会超出一部分。
还是上面的例子，但是 flex-shrink 分别改为 0.1，0.2，0.3。于是总权重为
sum = 300*0.1+400*0.2+500*0.3，三个元素收缩总和并不是 200，只会收缩 200的(0.1 + 0.2 + 0.3) / 1 即 60% 的空间：200*((0.1+0.2+0.3)/1) = 120。
let sum = 300*0.1+400*0.2+500*0.3;
let sub = 200*((0.1+0.2+0.3)/1);
a = 300 - sub*0.1*300/sum
b = 400 - sub*0.2*400/sum
c = 500 - sub*0.3*500/sum
注意
flex-shrink会受到min-width的影响。如果最终shrink后的结果大于min-width指定的值，min-width的值将会优先使用。 参考链接：- zhuanlan.zhihu.com/p/24372279
- www.ruanyifeng.com/blog/2015/0…
