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实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
html5调用摄像头实例代码
Jun 28 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
ES6的新特性概览
2016/03/10 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Vue实现验证码功能
2019/12/03 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
找工作求职信
2014/07/07 职场文书
技术股份合作协议书
2014/10/05 职场文书
优秀班组事迹材料
2014/12/24 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python