本文所分享的知识点是【CSS3 Flexbox中flex-shrink属性的用法示例介绍】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
CSS3 Flexbox中flex-shrink属性的用法示例介绍
在CSS3 Flexbox中flex-shrink属性定义为:
This <number> component sets ‘flex-shrink’ longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to ‘1’. The flex shrink factor is multiplied by the flex basis when distributing negative space.
通俗来讲就是当flex items的大小超过了flex container时， 各个flex item的压缩比例， 请看下面的示例:
<style>
#container div {
height: 200px;
width: 60px;
}
#test1 {
background-color: blue;
flex-shrink: 1;
}
#test2 {
background-color: yellow;
flex-shrink: 0.5;
}
</style>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
</div>
<div id="test1">与<div id="test2">的宽度总和是120px， 超过了<div id="container">的宽度100px， 超过的大小为20px, 那么container为了装下两个子div，两个子div的宽度就必须减少20px，那么每个子div的宽度减少多少呢？ 这个时候就需要flex-shrink属性来分配了，每个子div的实际显示宽度计算方法公式为:
实际值=计划值 - 总差值 * flex-shrink/(flex-shrink和)
根据上面的公式我们可以计算出<div id="test1">与<div id="test2">的实际宽度值分别为:
<div id="test1">: width=60 - 20 * 1 / (1 + 0.5)=47px
<div id="test2">: width=60 - 20 * 0.5 / (1 + 0.5)=53px
根据以上结果可知flex-shrink值越大，flex item的实际结果就会越小
关于CSS3 Flexbox中flex-shrink属性的用法示例介绍的相关讨论如下：
相关问题：用CSS3 box-flex 无法实现三栏垂直布局,上下层固定...
答：我看了一下 这个box必须有高度的 设置高度之后就可以了 这个盒模型就是要用flex来自适应的，总得有个参考值吧，参考值就是他父亲 box的高度~ >>详细
相关问题：CSS3 display：flex和display：box有什么区别
答：父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。 如： html： 01 02 03 article{ width:600px; height:200px; display:-moz-box; display:-webkit-box; display:box;} ... >>详细
相关问题：CSS3 display：flex和display：box有什么区别
答：CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。 许多设计... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-