flex-grow: 父元素盒子空间有剩余的时候, 这个属性的设置就是将剩余空间的瓜分比例,默认为0即不参与瓜分,设置值越大瓜分权重越大,当然参与者越多,瓜分到手的空间就越少~ 有点分蛋糕的意思,人一多就不够分了啊~
参考伪代码
var restZone = 100; // 剩余可瓜分的空间
var partInCount = 3; //参与瓜分的子元素们
var perZone = restZone/partInCount; //占比每一份空间大小
var gainZone = perZone * flex-grow; //瓜分到手的空间
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压缩后的结果