flex详解

flex: flex-grow flex-shrink flex-basis的组合
flex-grow(grow扩展的意思)，默认值为0:
（1）解释：如何分配flex子元素的剩余空间
（2）如果所有项目的flex-grow属性都相同，则它们将等分剩余空间
（3）如何计算：
1) 如果所有项目的flex-grow值大于1,如下, 1+2+3 > 1,,采取如下计算方式
如果主轴长度是600,A(50),B(100),C(150),三个项目对应的flex-grow分别是1,2,3,
剩余空间就是600-50-100-150=300,
那么ABC这三个项目分配到的剩余空间分别是:300*(1/1+2+3), 300(2/1+2+3), 300*(3/1+2+3)
即:50, 100, 150
那个这三个项目最终占据的空间分别是: 50+50, 100+100, 150+150(100, 200, 300)

2)如果所有项目的flex-grow值小于1,基值按照1来进行计算(分母),如下, 0.2+0.3+0.4 < 1,采取如下计算方式
就和上面1)举的例子来说,
那ABC这三个项目分配到的剩余空间是: 300*(0.2/1), 300*(0.3/1), 300(0.4/1)
即: 60, 90, 120
那个这三个项目最终占据的空间分别是: 50+60, 100+90, 150+120(110, 190, 270)

flex-shrink(shrink缩小的意思),默认值为1:
（1）解释：当flex空间不足时，该如何缩小（flex空间指的是本身定义的flex空间）
（2）如何计算：
1) 如果所有项目的flex-shrink值大于1,如下, 1+2+3 > 1,采取如下计算方式
如果主轴长度是600,A(100),B(300),C(500),三个项目对应的flex-shrink分别是1,3,2,
那先计算出总权重值: 100*1 + 300*3 + 500*2 = 2000px
每个项目的权重为: 100*1/2000, 300*3/2000, 500*2/2000(0.05, 0.45, 0.5)
溢出的空间长度是: 100+300+500 - 600 = 300px
那每个项目分别缩小: 300*0.05, 300* 0.45, 300*0.5(15,135,150)
那每个项目最终占据的空间分别是:100-15, 300-135, 500-150(85, 165, 350)

2) 如果所有项目的flex-shrink值小于1,只收缩溢出空间的一部分,即(0.1, 0.3, 0.2),
就和上面1)举的例子来说,
总的溢出空间是: 300*0.1+300*0.3+300*0.2 = 30+90+60 = 180px
由于每个项目的权重不变，
那么每个项目将分别缩小: 180*0.05, 180*0.45, 180*0.5(9, 81, 90)
那每个项目最终占据的空间分别是:100-9, 300-81, 500-90(91, 219, 410)

flex-basis
（1）解释：每个flex子项目占据主轴的空间
（2）可以设置成百分比

flex: 1表示flex: 1 1 0%

参考文献：https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/#comments
                 https://www.jb51.net/css/706642.html

标签：flex,150,300,详解,空间,100,grow
来源： https://www.cnblogs.com/xingzoudecd/p/15875616.html