您现在的位置是：网站首页> 编程资料编程资料
CSS3 Flexbox中flex-shrink属性的用法示例介绍利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS3的Flexbox骰子布局的实现及问题讲解基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css3弹性盒模型（Flexbox）详细介绍10分钟理解CSS3 FlexBox弹性布局
2023-10-26
186人已围观
简介 当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的实际结果就会越小
相关内容
- 将一个绝对定位的div水平垂直居中对齐DIV或者DIV里面的图片水平与垂直居中的方法让DIV水平垂直居中的两种完美方法推荐使用绝对定位+负外边距让DIV层水平垂直居中页面DIV以及图片水平垂直居中兼容多种浏览器DIV水平垂直居中css实现代码 div水平垂直居中的完美解决方案css3 flex实现div内容水平垂直居中的几种方法
- 疯狂猜成语一副画卷中黑色山和蓝色河水是什么成语_手机游戏_游戏攻略_
- 雷霆战机BOSS残骸获得方法 残骸有什么用_手机游戏_游戏攻略_
- 雷霆战机突击零式分析_手机游戏_游戏攻略_
- 雷霆战机刷体力方法分享_手机游戏_游戏攻略_
- 天天酷跑刷金币刷钻石攻略_ios破解版UU助手辅助刷分教程推荐_手机游戏_游戏攻略_
- 雷霆战机无敌通关技巧_烧饼修改器闯关模式无敌秒杀通关攻略推荐_手机游戏_游戏攻略_
- 雷霆战机刷箱子_无尽模式烧饼修改器刷箱子教程攻略推荐_手机游戏_游戏攻略_
- 雷霆战机聚能爆破弹怎么样_雷霆战机聚能爆破弹属性详解_手机游戏_游戏攻略_
- 天天炫斗 仓木薰好不好 仓木薰技能介绍_手机游戏_游戏攻略_
点击排行
本栏推荐
