Flex弹性盒子中`flex-grow`,`flex-shrink`,`flex-basis`的区别

Posted 2021-03-06 wgb1234

1. flex-grow: 父元素盒子空间有剩余的时候, 这个属性的设置就是将剩余空间的瓜分比例,默认为0即不参与瓜分,设置值越大瓜分权重越大,当然参与者越多,瓜分到手的空间就越少~ 有点分蛋糕的意思,人一多就不够分了啊~

参考伪代码

 var restZone = 100; // 剩余可瓜分的空间
 var partInCount = 3; //参与瓜分的子元素们
 var perZone = restZone/partInCount; //占比每一份空间大小
 var gainZone = perZone * flex-grow; //瓜分到手的空间 

2. flex-shrink: 与flex-grow是两个极端, 这个是当父元素盒子不够分给子元素的时候,也可能是子元素设置宽高超出了父元素的承受范围,按设置的flex-shrink值所占的比例来瓜分对应的空间,设置的值越小分配的空间越大,默认为1(所有都是1的话就是平均分配),设置为0的时候保持原有尺寸不参与压缩(关于flex-shrink的计算比较绕)

PS. 生活中常见的例子,比如计划DIY一台电脑,预算5000块,找专业人士一分析下来差不多要6000块,显卡和电源一开始没有纳入预算,但是预算只有5000,不得不降低部分配置的档次,买一些相对便宜的零配件,把成本控制在5000块以内...

详情参见伪代码

var totalZone = 5000;//假设只有那么多 
var originalA = 3000;// 零件A
var originalB = 4000; // 零件B
var ?zone = (originalA+originalB) - totalZone; //超出的部分  
var shrinkA = 3; // 设置A缩放系数
var shrinkB = 2; //设置B缩放系数

var cutA = ?zone * ((originalA*shrinkA)/(originalA*shrinkA+originalB*shrinkB)); //A需要缩减的部分
var cutB = ?zone * ((originalB*shrinkB)/(originalA*shrinkA+originalB*shrinkB)); //B需要缩减的部分
var resultA = originalA - cutA; // A压缩后的结果
var resultB = originalB - cutB; // B压缩后的结果

3. flex-basis这个简单,字面意思是基础值,就是在flex布局下,设置了这个属性时可以覆盖width,设置初始值差不多,没啥好说的,就是最基本的操作.