一、flex-grow
flex-grow 设置当 flex 容器存在剩余空间(flex容器的大小减去所有flex项的大小之和)时项目的放大比例，它的默认值为 0 (即使存在剩余空间也不放大)。
如果所有项目的 flex-grow 属性值都是相同的，则它们将等分剩余空间，否则，将根据不同的属性值所定义的比率进行分配。
如果子元素放大比例相加大于1：
<style> .flex { display: flex; background-color: antiquewhite; width: 800px; } .a { background-color: thistle; width: 100px; flex-grow:0.4; } .b { background-color: tomato; width: 200px; flex-grow:0.5; } .c { background-color: violet; width: 300px; flex-grow: 0.6; } .a, .b, .c { height: 100px; } </style> <div class="flex"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div>
效果如下：
计算公式：
剩余空间：x 假设有三个flex item元素，flex-grow 的值分别为a, b, c 每个元素可以分配的剩余空间为： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x。
所以三个子元素的宽度为：
a元素：0.4/（0.4+0.5+0.6）*200+100=153.34 b元素：0.5/（0.4+0.5+0.6）*200+200=266.66 c元素：0.6/（0.4+0.5+0.6）*200+300=380
如果子元素放大比例相加小于1：
<style> .flex { display: flex; background-color: antiquewhite; width: 800px; } .a { background-color: thistle; width: 100px; flex-grow:0.1; } .b { background-color: tomato; width: 200px; flex-grow:0.2; } .c { background-color: violet; width: 300px; flex-grow: 0.3; } .a, .b, .c { height: 100px; } </style> <div class="flex"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div>
效果如下：
计算公式：
假设有三个flex item元素，flex-grow 的值分别为a, b, c 可分配空间：y=剩余空间x*比例之和(a+b+c) 每个元素可以分配的剩余空间为： a/(a+b+c) * y，b/(a+b+c) * y，c/(a+b+c) * y。
所以三个子元素的宽度为：
可分配空间=200*（0.1+0.2+0.3）=120 a元素：0.1/（0.1+0.2+0.3）*120+100=120 b元素：0.2/（0.1+0.2+0.3）*120+200=240
c元素：0.3/(0.1+0.2+0.3）*120+300=360
二、flex-shrink
flex-shrink 设置当 flex 容器空间不足时项目的缩小比例，它的默认值为 1 (空间不足时该项目将缩小)。
flex-shrink 的计算方式与 flex-grow 略有不同，有两个因素影响 flex 项该缩小多少，一个是 flex-shrink 的属性值，另一个是 flex 项本身的大小，它们按各自的权重进行缩小。
如果子元素缩小比例相加大于1：
<style> .flex { display: flex; background-color: antiquewhite; width: 400px; } .a { background-color: thistle; width: 100px; flex-shrink:0.4; } .b { background-color: tomato; width: 200px; flex-shrink:0.5; } .c { background-color: violet; width: 300px; flex-shrink: 0.6; } .a, .b, .c { height: 100px; } </style> <div class="flex"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div>
效果如下：
计算公式：
三个flex item元素的width: w1, w2, w3 三个flex item元素的flex-shrink：a, b, c 计算总压缩权重：sum = a * w1 + b * w2 + c * w3 计算每个元素压缩率： S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum 计算每个元素宽度：width - 压缩率 * 溢出空间
所以三个子元素的宽度为：
总压缩权重：0.4*100+0.5*200+0.6*300=320 需要压缩的总空间为：600-400=200 a元素：100-（（0.4*100/320）*200）=75 b元素：200-（（0.5*200/320）*200）=137.5 c元素：300-（（0.6*300/320）*200）=187.5
如果子元素缩小比例相加小于1：
<style> .flex { display: flex; background-color: antiquewhite; width: 400px; } .a { background-color: thistle; width: 100px; flex-shrink:0.1; } .b { background-color: tomato; width: 200px; flex-shrink:0.2; } .c { background-color: violet; width: 300px; flex-shrink: 0.3; } .a, .b, .c { height: 100px; } </style> <div class="flex"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div>
效果如下：
计算公式：
三个flex item元素的width: w1, w2, w3 三个flex item元素的flex-shrink：a, b, c 计算总压缩权重：sum = a * w1 + b * w2 + c * w3 计算每个元素压缩率： S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum 实际溢出空间= 溢出空间*缩小比例总和 计算每个元素宽度：width - 压缩率 * 实际溢出空间
所以三个子元素的宽度为：
总压缩权重：0.1*100+0.2*200+0.3*300=140 溢出空间：600-400=200 实际溢出空间：200*（0.1+0.2+0.3）=120 a元素：100-（（0.1*100/140）*120）=91.43 b元素：200-（（0.2*200/140）*120）=165.71 c元素：300-（（0.3*300/140）*120）=222.86
三、flex-basis
flex-basis 决定了项目占据主轴的空间，除非使用 box-sizing 进行设置，否则它将设置内容框的大小。
你可以为其指定一个具体的CSS尺寸值，也可以指定其占据父元素的百分比，它的默认值为 auto(根据内容自动调整大小)
<style> .flex { display: flex; background-color: antiquewhite; width: 400px; } .a { background-color: thistle; flex-basis:100px; } .b { background-color: tomato; flex-basis:30%; } .c { background-color: violet; flex-basis:40%; } .a, .b, .c { height: 100px; } </style> <div class="flex"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div>
效果如下：
a元素：定宽100 b元素：400*30%=120 c元素：400*40%=160
