CSS3中采纳弹性盒中弹性我的项目的压缩规定
默认状况下，当弹性盒空间有余时，弹性我的项目会相应压缩，当具体的压缩规定是什么呢？咱们来看一个示例
<style> .contain { width: 300px; height: 300px; background: red; display: flex; } .item1 { width: 200px; height: 200px; background: green; flex-shrink: 1 } .item2 { width: 400px; height: 200px; flex-shrink: 2; background: blue; }</style><body> <div class="contain"> <div class="item1"></div> <div class="item2"></div> </div></body>失去的后果是item1的宽度为140px,item2的宽度为160px,也就是说，item1的压缩值是60px，item2的压缩值为240px。压缩值算法如下：
加权值 = 每个弹性我的项目的理论内容宽度 * 压缩比例 之和
压缩值 = 弹性我的项目的理论内容宽度 压缩比例 弹性盒超出宽度 / 加权值
将下面的示例来演算一下：
弹性盒超出宽度 = 200 + 400 - 300 = 300
加权值 = 200 1 + 400 2 = 1000
item1压缩值 = 200 1 300 / 1000 = 60
item2压缩值 = 400 2 300 / 1000 = 240
留神：计算加权值肯定要代入弹性我的项目的理论内容宽度，也就是内容区的宽度。
例如：
<style> *{ box-sizing:border-box; } .contain { width: 300px; height: 300px; background: red; display: flex; } .item1 { width: 200px; height: 200px; background: green; flex-shrink: 1; padding:0 50px; } .item2 { width: 400px; height: 200px; flex-shrink: 2; background: blue; }</style><body> <div class="contain"> <div class="item1"></div> <div class="item2"></div> </div></body>失去的后果为item1的宽度为166.67px,item2的宽度为133.33px。也就是说item1的压缩值为33.33px,item2的压缩值为266.67px。咱们用上述公式求一下压缩值：
加权值 = 100 1 + 400 2 = 900
item1压缩值 = 100 1 300 / 900 = 33.33
item2压缩值 = 400 2 300 / 900 = 266.67
用公式求进去的后果与实在后果统一。所以在默认状况下，当弹性盒空间有余时，弹性我的项目的压缩规定如下：
加权值 = 每个弹性我的项目的理论内容宽度 * 压缩比例 之和
压缩值 = 弹性我的项目的理论内容宽度 压缩比例 弹性盒超出宽度 / 加权值