前言Flex有三个属性值，分别是flex-grow、flex-shrink和flex-basis，默认值为01auto。发现网上详细介绍它们的文章比较少，所以今天就详细说说，一一阅读。flex-grow定义item的放大比例，默认值为0，即使有剩余空间也不会放大。三言两语不能表达意思，还是看DEMO吧。flex-growflex-grow的默认值为0，如果不定义该属性，将无权分配剩余空间。A、B、C、D、E的宽度分别为100、120、130、100、100，parent的宽度为660，用child的全宽减去parent的宽度，所以剩余空间为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)*1C计算公式：130+(110/3)*2flex-shrink定义项目的收缩率，默认值为1，注意前提是有空间不足，请参见示例。在flex-shrink中，A、B、C的宽度分别为155、200、50（注意这里的宽度换成了flex-basis，和本例中的width效果一样）。parent的宽度是300，多余的空间是-105，所以多余的105px会被A、B、C消化掉，比例是2:1:1。怎么消化呢？首先是将每一项的wdith值乘以flex-shrink值，A：(155*2)=310B：(200*1)=200C：(50*1)=50。然后将所有的乘积相加项目。(310+200+50)=560得到比例后，还要乘以要腾出的空间。A：(310/560)*105=58.125B：(200/560)*105=37.5C：(50/560)*105=9.375得到每一项要腾出的空间后，则A：(155-58.125)=96.875B:(200-37.5)=162.5C:(50-9.375)=40.625那么，这给出了计算出的宽度。flex-basis和width一样，它的默认值是auto，把上面的例子换成width也是一样的。当然，工作中最好使用flex-basis，更符合规范。总结如果父级有足够的空间：flex-grow有效，flex-shrink无效。如果parent空间不足：flex-shrink有效，flex-grow无效。如有任何问题，欢迎一起讨论，共同学习。原文：https://xiecg.github.io/2016/...
