flex布局（全称：CSS Flexible Box Layout Module）早在2009年就有了，如果现在使用最新的flex语法会发现支持程度并不好，即使是在“高端”浏览器上也是如此，比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同

网上现有的代码中充斥着各种版本，在Chrome下运行一般都没有问题，Firefox一般也还好，但Android与IOS Safari下就显得非常无力了。之所以会出现这样的局面，主要是历史原因，从2009年到2015年，期间W3C规范有了多次更新，浏览器支持程度也就有了差异

一.W3C各个版本的flex

2009版

标志：display: box; 或者box-{*}属性 (例如 box-pack)

2011版

标志：display: flexbox; 或者 flex() 函数

2012版

标志：display: flex/inline-flex; 和 flex-{*}属性

2014版

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

2015 W3C Editor’s Draft

没有大的改动

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

二.浏览器兼容性

关于flex的W3C规范： http://dev.w3.org/csswg/css-flexbox-1/

浏览器兼容性可以参考CanIUse： http://caniuse.com/#feat=flexbox

根据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-前缀

所以需要考虑新版本2012： http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/

而Android需要考虑旧版本2009： http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

实例：创建两列等宽布局

HTML：
这里需要1个父容器，以及2个子元素

<div class="flexbox-container">
	<div><h3>Column 1</h3></div>
	<div><h3>Column 2</h3></div>
</div>

.flexbox-container {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
        padding: 20px;
        background:#eee;
}

.flexbox-container > div {
	width: 50%;
	padding: 10px;
        background:#fff;
}

.flexbox-container > div:first-child {
	margin-right: 20px;
}

Demo