CSS3 Flexbox中flex-shrink属性的用法
2013-12-29 14:48
411 查看
在CSS3 Flexbox中flex-shrink属性定义为:
This <number> component
sets ‘
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 ‘
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的实际结果就会越小
参考链接:
1: http://www.w3.org/TR/css3-flexbox/#flex-shrink
2: http://www.w3.org/TR/css3-flexbox/#flex-shrink-factor
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的实际结果就会越小
参考链接:
1: http://www.w3.org/TR/css3-flexbox/#flex-shrink
2: http://www.w3.org/TR/css3-flexbox/#flex-shrink-factor
相关文章推荐
- CSS3 Flexbox中flex-shrink属性的用法示例介绍
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- CSS3 flexbox 布局 ---- flex项目属性介绍
- CSS3 flexbox 布局 ---- flex 容器属性介绍
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- CSS3 Flex布局 Flexbox的属性详解
- css3属性中background-clip与background-origin的用法释疑
- 浅谈CSS3中display属性的Flex布局
- CSS3中不熟悉的属性2:display:box和display:flex的区别
- CSS3中Animation动画属性用法详解
- css3属性中background-clip与background-origin的用法释疑
- CSS3新属性box-flex移动端利器
- css3属性flex弹性布局设置三列(四列)分布样式
- CSS3 Flex布局整理(三)-项目属性
- css3 中background的新增加的属性的用法(一)
- css3中font-face属性的用法详解
- CSS3 box-flex 属性
- 细说css3 flex布局之flex容器属性