南强小屋 Design By 杰米
在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的实际结果就会越小
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的实际结果就会越小
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无CSS3 Flexbox中flex-shrink属性的用法示例介绍的评论...