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制作苹果风格键盘特效
Feb 26 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 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动态函数调用方法
2015/05/21 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python中集合类型(set)学习小结
2015/01/28 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python整数对象实现原理详解
2019/07/01 Python
体育专业学生自我评价范文
2014/01/17 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
社团活动总结格式
2014/08/29 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
小学教师自我评价
2015/03/04 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书