透彻理解flex三剑客

透彻理解flex -grow;flex-shrink;flex-basis

👇想深入理解一定看下面这个链接进去
请点击这个链接

上面的那个链接其实已经就很nice了，但是我还是用我自己的大白话来总结一下

例：有一个父div,给他一个1000px宽度，它里面有3个子元素div,每个子元素的宽度分别是200px,300px,400px,他们三个子元素的总和加起来是900px,此时还有100px的剩余空间，如果不给他们设置flex属性，那么这100px就只能在那空着了，但是现在咱们给他们设置一下flex属性，于是就出现下面的问题了

1. flex-grow 这个是简单说就是 “往外扩展” 的意思，三个子元素分别设置
   item1:{flex-grow:1};item2:{flex-grow:2};item3:{flex-grow:2}
   这样来看呢就是把100px,分别分成了5份，每份20px,三个子元素的占比分别是1*20 = 20px，2 * 20 = 40px，2 * 20 = 40px；所以现在计算一下他们的宽度是多少？很简单了：item1 = 200px + 20px = 220px, item2 = 300px + 40px = 340px, item3 = 400px + 40px = 440px;这样加起来就是1000px了。

2. flex-shrink 这个白话文说就是 “压缩” 的意思，现在给三个元素重新设置宽度，分别是300px;400px；500px;现在他们三个加起来就超过1000px的宽度了，这时候就用flex-shrink来给他们等比压缩，来适应父盒子的宽度；tem1:{flex-shrink:1};item2:{flex-shrink:2};item3:{flex-shrink:2} 道理是相同的，200px的宽度，他们分为了5份，每份40px,他们等比压缩后的宽度就是300-40 = 260px,400-80 = 320px,500-80 = 420px;这样加起来他们就又可以成1000px了，

3. 最后来说一说 flex-basis 这个属性是啥意思呢？ 这个属性的意思就是设置元素的宽度，它通常与上面两个属性共同用,给他们设置一下昂 item1:{flex:1 1 200px} item2:{flex:2 1 200px} item3:{flex:2 1 200px} 这几个属性的顺序就是 flex-grow,flex-shrink,flex-basis,这几个属性写好以后，父盒子的宽度 就可以随意改变了，这样模块就自适应了。

上面的几个属性，通过这样理解就非常简单了，但是仅限于理解使用，更深一层的意义还是要参考我上面推送给大家的链接，大神写的那个是非常全的，也算是帮大神推广一波。