flex

  • 版本:CSS3
  • 继承性:无

flex语法:

flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

默认值看各分拆属性

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

继承性:无

flex取值:

none:
none关键字的计算值为: 0 0 auto
[ flex-grow ]:
定义弹性盒子元素的扩展比率。
[ flex-shrink ]:
定义弹性盒子元素的收缩比率。
[ flex-basis ]:
定义弹性盒子元素的默认基准值。

flex说明:

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
  • 如果缩写flex:1, 则其计算值为:1 1 0
  • 示例:如下情况每个元素的计算宽是多少

    HTML Code:

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

    CSS Code:

    #box{display:-webkit-flex;display:flex;width:800px;margin:0;padding:0;list-style:none;}
    #box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
    #box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
    #box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}

    上例中,定义了父容器宽(即主轴宽)为800px,由于子元素设置了伸缩基准值flex-basis,相加300+500+600=1400,那么子元素将会溢出1400-800=600px;
    由于同时设置了收缩因子,所以加权综合可得300*1+500*2+600*3=3100px;
    于是我们可以计算a,b,c将被移除的溢出量是多少:
    a被移除溢出量:300*1/3100*600=3/31,即约等于58px
    b被移除溢出量:500*2/3100*600=10/31,即约等于194px
    c被移除溢出量:600*3/3100*600=18/31,即约等于348px
    最后a,b,c的实际宽度分别为:300-58=242px, 500-194=306px, 600-348=252px

  • 对应的脚本特性为flex

flex兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 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示例:

由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参考手册