CSS3 Flexbox中flex-shrink属性的用法示例介绍


Posted in HTML / CSS onDecember 30, 2013

在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的实际结果就会越小
HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 #HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 #HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 #HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 #HTML / CSS
css3高级选择器使用方法
Dec 02 #HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 #HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 #HTML / CSS
You might like
php 文件上传类代码
2011/08/06 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php单例模式实现方法分析
2015/03/14 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
js中文逗号转英文实现
2014/02/11 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python正则实现提取电话功能
2018/02/24 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python类成员继承重写的实现
2020/09/16 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
工作睡觉检讨书
2014/02/25 职场文书
经典团队口号大全
2014/06/21 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
高中社区服务活动报告
2015/02/05 职场文书
党支部综合考察意见
2015/06/01 职场文书
吴仁宝观后感
2015/06/09 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python