flex-shrink (适用于弹性盒模型容器子元素)
设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。)
语法
flex-shrink: <number> (default 1)
- flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
- 本例中c显式的定义了flex-shrink,a,b没有显式定义,但将根据默认值1来计算,可以看到总共将剩余空间分成了5份,其中a占1份,b占1份,c占3分,即1:1:3
- 我们可以看到父容器定义为400px,子项被定义为200px,相加之后即为600px,超出父容器200px。那么这么超出的200px需要被a,b,c消化
- 按照以上定义a,b,c将按照1:1:3来分配200px,计算后即可得40px,40px,120px,换句话说,a,b,c各需要消化40px,40px,120px,那么就需要用原定义的宽度相减这个值,最后得出a为160px,b为160px,c为80px
CSS代码HTML代码
#flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
#flex li{width:200px;}
#flex li:nth-child(1){background:#888;}
#flex li:nth-child(2){background:#ccc;}
#flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
flex-shrink示例:
flex-shrink (适用于弹性盒模型容器子元素)的更多相关文章
- CSS3 中弹性盒模型--容器的属性
1.display : flex | inline-flex注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性 将失效. 2.flex-direction ...
- flexbox-CSS3弹性盒模型flexbox完整版教程
原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...
- CSS3弹性盒模型flexbox完整版教程
http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...
- CSS3弹性盒模型flexbox布局
属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器.· box:将对象作为弹性伸缩盒显示. ...
- 弹性盒模型 flex box
弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...
- css之弹性盒模型
弹性盒子(Flexible Box/filebox)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子 ...
- CSS3弹性盒模型新版和老版写法差异
1.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box: 新版弹性盒模型:flex:display : flex 老版弹性盒模型:box : disp ...
- web移动端-弹性盒模型
(父元素加) : /*新版弹性盒模型*/ /* display: flex; */ /*设置主轴方向为水平方向*/ /* flex-direction: row; */ /*设置主轴方向为垂直方向*/ ...
- IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型
CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.弹性盒模型看起 ...
随机推荐
- 各种软件的安装教程centos mysql tomcat nginx jenkins jira 等等
464 Star3,606 Fork 1,460 judasn/Linux-Tutorial 作者: https://github.com/judasn Linux-Tutorial/markdow ...
- kubernetes中port、target port、node port的对比分析,以及kube-proxy代理
转:http://blog.csdn.net/xinghun_4/article/details/50492041 容器网络实例 服务中的3个端口设置 这几个port的概念很容易混淆,比如创建如下se ...
- class path and classloader
https://www.artima.com/insidejvm/ed2/linkmod5.html https://www.artima.com/insidejvm/ed2/securityP.ht ...
- Instrumentation 功能介绍(javaagent)
利用 Java 代码,即 java.lang.instrument 做动态 Instrumentation 是 Java SE 5 的新特性,它把 Java 的 instrument 功能从本地代码中 ...
- 教你一招:Microsoft Office Word已停止工作
1/按组合键WIN+R打开运行对话框 2/在打开框中键入%USERPROFILE%\AppData\Roaming\Microsoft\Templates,单击“确定”按钮 3/在打开的窗口鼠标右键删 ...
- 【转】ELK 日志分析系统
大纲: 一.简介 二.Logstash 三.Redis 四.Elasticsearch 五.Kinaba 一.简介 1.核心组成 ELK由Elasticsearch.Logstash和Kibana三部 ...
- python 迭代器模式
迭代器模式 迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常用的设计模式.这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示. 迭代器模式属于行 ...
- python mysql redis mongodb selneium requests二次封装为什么大都是使用类的原因,一点见解
1.python mysql redis mongodb selneium requests举得这5个库里面的主要被用户使用的东西全都是面向对象的,包括requests.get函数是里面每次都是实例 ...
- [Object Tracking] How to learn Active contour model - Snake Model
常见四种跟踪的思路: 区域:人体肢体识别.跟踪 模型:人体面部识别.跟踪 特征:摄像头3D定位 主动轮廓:(蛇模型属于这er,数学基础<图像处理的偏微分方程方法>,也是最流行的一个目前) ...
- [AWS] Deploy react project on EC2
如何在aws部署项目 申请到亚马逊AWS免费账户后,我们可以拥有很多的免费云服务产品项目,其中包括: EC2云服务器. Amazon S3存储. Amazon RDS数据库. Amazon Cloud ...