标签：flex 150 300 详解 空间 100 grow

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。