CSS3 Flexbox中flex-shrink属性的用法示例介绍
发布时间：2013-12-30 11:40:29 作者：佚名 
我要评论
我要评论当flex items的大小超过了flex container时， 各个flex item的压缩比例，下面有个不错的教程，大家可以参考下
在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的实际结果就会越小
相关文章
- 这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考2016-09-12
- 骰子布局顾名思义,就是好比骰子的一面最多可以放置9个点,而每个面放置的点数正好就是一个布局的模型图,这里我们就带来CSS3的Flexbox骰子布局的实现及问题讲解:2016-06-27
- 这篇文章主要介绍了基础的CSS3弹性盒Flexbox布局使用实例,文中最后也提到了解决兼容性问题的基本方法,需要的朋友可以参考下2016-04-08
- 这篇文章主要介绍了CSS3的Flexbox布局的简明入门指南,Flexbox在"布局界"可谓风光无限,近来Facebook开源的React Native也采用Flexbox来布局,需要的朋友可以参考下2016-04-08
- 今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。本文主要是总结一下今天所学，有需要的朋友可以参考下2014-10-08
这篇文章主要介绍了10分钟理解CSS3 FlexBox弹性布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-20
最新评论