Flex布局旧版本和新版本下的属性关系

@XYooo 2017-05-15 00:32:13发表于 iuap-design/blog

一.flex布局的现状

布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,虽然它已经得到了所有浏览器的支持,但是支持程度并不好,即使是在“高端”浏览器上也是如此,比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同。

二.flex布局的版本信息

(2009)Flexible Box Layout Module W3C Working Draft, 23 July 2009

(2011)Flexible Box Layout Module W3C Working Draft, 22 March 2011

(2012)CSS Flexible Box Layout Module W3C Working Draft, 12 June 2012

(2014)CSS Flexible Box Layout Module Level 1 W3C Last Call Working Draft, 25 September 2014

(2015)CSS Flexible Box Layout Module Level 1 W3C Last Call Working Draft 14 May 2015

(2016)CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 26 May 2016

三.两种常见版本的flex布局

根据CanIUse的数据可以总结如下:

IE10部分支持2012,需要-ms-前缀

Android4.1/4.2-4.3部分支持2009,需要-webkit-前缀

Safari7/7.1/8部分支持2012,需要-webkit-前缀

IOS Safari7.0-7.1/8.1-8.3部分支持2012,需要-webkit-前缀,但是也有部分支持2009

所以在采用flex布局时候需要考虑新版本2012属性,而IOS/Android需要考虑旧版本2009属性。

对于新版本2012的学习,可以参考下面的链接进行学习

www.ruanyifeng.com/blog/2015/07/flex-grammar.html

四.旧版本Flex布局属性总结

1.定义子元素排列

新的写法flex-direction

旧的写法box-orient+box-direction

用box-orient:horizontal + box-direction:normal/reverse可以达到flex-direction:row/row-reverse效果

用box-orient:vertical + box-direction:normal/reverse可以达到flex-direction:column/column-reverse效果
2.定义子元素换行情况

新写法flex-wrap

旧写法box-lines:single/multiple 默认single
3.前俩个元素的合写

新写法:flex-flow
旧写法:box-orient+box-lines配合
4.横向排列布局

新写法:justify-content
旧写法:box-pack
5.竖向排列布局

新写法:align-items
旧写法:box-align
6.伸缩盒子布局
新写法:flex:num
旧写法:box-flex
7.元素出现顺序
新写法:order:num
旧写法:border-order:num
在实际的情况下采用合适的属性来才能实现flex布局。
Flex布局的新旧版本属性为了得到更广泛的支持浏览器,你需要添加webkit内核和ie浏览器的前缀。关于前缀的有效添加,可以参考下面文章:
github.com/iuap-design/blog/issues/190