您现在的位置是：网站首页> 编程资料编程资料

CSS3 Flexbox中flex-shrink属性的用法示例介绍利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS3的Flexbox骰子布局的实现及问题讲解基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css3弹性盒模型（Flexbox）详细介绍10分钟理解CSS3 FlexBox弹性布局

2021-09-06 740人已围观

简介当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的压缩比例，请看下面的示例:

复制代码

代码如下:

与

的宽度总和是120px，超过了

的宽度100px，超过的大小为20px, 那么container为了装下两个子div，两个子div的宽度就必须减少20px，那么每个子div的宽度减少多少呢？这个时候就需要flex-shrink属性来分配了，每个子div的实际显示宽度计算方法公式为:

实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)

根据上面的公式我们可以计算出

与

的实际宽度值分别为:

复制代码

代码如下:

: width = 60 - 20 * 1 / (1 + 0.5) = 47px

: width = 60 - 20 * 0.5 / (1 + 0.5) = 53px

根据以上结果可知flex-shrink值越大，flex item的实际结果就会越小

上一篇：将一个绝对定位的div水平垂直居中对齐DIV或者DIV里面的图片水平与垂直居中的方法让DIV水平垂直居中的两种完美方法推荐使用绝对定位+负外边距让DIV层水平垂直居中页面DIV以及图片水平垂直居中兼容多种浏览器DIV水平垂直居中css实现代码 div水平垂直居中的完美解决方案css3 flex实现div内容水平垂直居中的几种方法

下一篇：css画太极图(阴阳八卦)太极图谱解析软件 PDF版疯狂猜成语太极图案上一个气字答案是什么成语