css3弹性方块布局：Flex

浏览器的兼容

CSS3弹性方块布局： flex

比较适合移动端的使用，下面是各浏览器的兼容情况

先说一下自己的理解。。

刚开始看到这个就有点懵，怎么一会是box，一会是flexbox，一会又是flex，到底是什么鬼东西！

其实他们只是不同版本的写法而已

W3C各个版本的flex

2009 version

标志：display: box; or a property that is box-{*} (eg. box-pack)

2011 version

标志：display: flexbox; or the flex() function or flex-pack property

2012 version

标志：display: flex/inline-flex; and flex-{*} properties

2014 version

新增了对flex项z-index的规定

2015 W3C Editor’s Draft

没有大的改动

P.S.注意2015的是W3C Editor’s Draft，只是个草案，还处于修修改改的阶段，还没有征集浏览器供应商的意见

基本概念

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
行内元素也可以使用Flex布局。
Webkit内核的浏览器，必须加上-webkit前缀。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex语法与实例

最后还是上阮大神的文章，讲解的很详细。

Flex 布局教程：语法篇

Flex 布局教程：实例篇