flex-shrink

  • 版本:CSS3
  • 继承性:无
flex-shrink属性在CSS新弹性盒模型中是比较常用的,本文将带你深入理解flex-shrink属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上flex-shrink的演示案例,希望能够对你有所帮助。

flex-shrink的具体语法

flex-shrink<number>

默认值1

适用于:弹性盒模型容器子元素

继承性:无

flex-shrink的取值介绍

<number>
用数值来定义收缩比率。不允许负值

flex-shrink的使用说明

设置或检索弹性盒的收缩比率。
  • 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
  • 示例:a,b,c将按照1:1:3的比率来收缩空间

    HTML Code:

    <ul id="flex">
    	<li>a</li>
    	<li>b</li>
    	<li>c</li>
    </ul>

    CSS Code:

    #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的默认值为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

  • 对应的脚本特性为flexGrow

flex-shrink的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
较早版本 6.0-10.0 4.0-19.0 5.1.7-6.0 21.0-28.0-webkit- 9.-12.0
较新版本 11.0 20.0 7.0-webkit- 29.0 12.1

flex-shrink的完整演示案例

由FlexBox算法强力驱动的Weex布局引擎

Yoga本是Facebook在ReactNative里引入的一种跨平台的基于CSS的布局引擎,它实现了Flexbox规范,完全遵守W3C的规范...4月5日

我对Flexbox布局模式的理解

Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的...5月24日

理解Flexbox:你需要知道的一切(一)

这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备...3月28日

CSS3 Flexbox属性视觉指南 | Scotch

}旁注这是你需要在父容器上设置的唯一属性,所有它的直接子元素都自动成为flex项目。有很多种方法分组flexbox属性...4月23日

CSS Flexbox 学习指南、工具与框架

Flexbox是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐。虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它...2月18日

Stack自动布局:Sketch中的Flexbox

Stack的自动布局可以再次改变整个局面。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。我们相信,推动设计生态前进的关键在于...2月26日

Web布局新系统:CSS Grid,Flexbox和Box Alignment

虽然我们使用很多技术手段能实现Web的固定布局,但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是,我们有了Flexbox模块...2016年12月19日

使用FlexBox:实现兼容新旧浏览器的最佳方案

FlexBox是非常杰出的,同时也是未来的布局方式之一。在过去的几年里...2016年11月3日

基础篇章:React Native之Flexbox的讲解(Height and Width)

大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)今天在讲解Flexbox之前,我们先讲解一下高度和宽度的问题...2016年10月16日

[原]混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位...

那么就会按照比值大小来分配尺寸,诸如安卓的Layout_weightLayoutwithFlexboxflexbox规则来指定某个组件的子元素的布局...2016年8月20日

React Native 之 flexbox 布局详解篇 (清晰明了)

比较简单。RN的而布局是用css中的flexbox布局,所以布局起来与android传统的布局样式有点像...2016年6月5日

最后说一个Flexbox实现的水平、垂直居中例子:伸缩容器设置如下样式,伸缩项目无论是否定义宽高都可实现水平、垂直居中效果。html代码...2016年5月18日

2、React Native中的flexbox布局

不论是Android还是iOS还是web前端,都有涉及到,ReactNative中也有布局,主要采用了类似css中的flexbox布局...2016年1月23日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册