CSS3 Flexbox中flex-shrink属性的用法示例介绍
当flex items的大小超过了flex container时， 各个flex item的压缩比例，下面有个不错的教程，大家可以参考下
在CSS3 Flexbox中flex-shrink属性定义为:
This 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的压缩比例， 请看下面的示例:
This
通俗来讲就是当flex items的大小超过了flex container时， 各个flex item的压缩比例， 请看下面的示例:
复制代码
代码如下:与
的宽度总和是120px， 超过了
的宽度100px， 超过的大小为20px, 那么container为了装下两个子div，两个子div的宽度就必须减少20px，那么每个子div的宽度减少多少呢？ 这个时候就需要flex-shrink属性来分配了，每个子div的实际显示宽度计算方法公式为:
实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)
根据上面的公式我们可以计算出
实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)
根据上面的公式我们可以计算出
与
的实际宽度值分别为:
复制代码
代码如下:: width = 60 - 20 * 1 / (1 + 0.5) = 47px
根据以上结果可知flex-shrink值越大，flex item的实际结果就会越小
: width = 60 - 20 * 0.5 / (1 + 0.5) = 53px
根据以上结果可知flex-shrink值越大，flex item的实际结果就会越小
标签：
相关文章
css3媒体查询中device-width和width的区别详解
这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
CSS3媒体查询实现不同宽度的下不同内容的展示功能
这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例，需要的朋友可以参考下
CSS3几种实现子容器水平垂直居中的方法
本文有几种方法可以实现容器与子容器水平垂直居中，主要包括Flexbox布局，position绝对定位+transform，表格布局，具有一定的参考价值，感兴趣的可以了解一下
css3实现文字首尾衔接跑马灯的示例代码
这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
CSS的浮动及清除浮动的5种方法介绍
这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪