1.flex-grow
定义项目的放大比例，默认值为0，就算存在剩余空间，也不会放大。
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
2.flex-shrink
定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下。
这里A，B，C的宽度分别是155，200，50，(注意这里的宽度用flex-basis代替的，和width的作用是一样的)。父级宽度是300，计算超出的空间就是-105，这样超出的105px就要被A，B，C消化掉，比例是2:1:1。
如何消化？首先是每个项目的width值乘以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
好了，这样就得出计算后的宽度了。
3.flex-basis
和width一样，默认值为auto，以上例子换成width也是一样的。当然工作中最好用flex-basis，更符合规范。
总结
如果父级的空间足够：flex-grow有效，flex-shrink无效。
如果父级的空间不够：flex-shrink有效，flex-grow无效。