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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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使用mkdir创建多级目录入门例子
2014/05/10 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
js module大战
2019/04/19 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python生成器用法实例详解
2019/11/22 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
政风行风评议整改方案
2014/09/15 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
SQLServer常见数学函数梳理总结
2022/08/05 MySQL
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android