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实现3D旋转书本效果
Mar 21 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
详解python播放音频的三种方法
2019/09/23 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
销售人员个人求职信
2013/09/26 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
顶撞老师检讨书
2014/02/07 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
初中生评语大全
2014/04/24 职场文书
篮球比赛策划方案
2014/06/05 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
员工开除通知书
2015/04/25 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python