android 一行两列布局,用Flexbox创建两列等宽布局

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，只是个草案，还处于修修改改的阶段，还没有征集浏览器供应商的意见

二.浏览器兼容性

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

实例：创建两列等宽布局

HTML：

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

[html]

[/html]

每一列中的内容都可以是任意高度。

CSS：

[css].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;

}

[/css]

只需设置父容器flexbox，然后给子元素设置50%的宽度。子元素可以添加填充，边框，不用担心会溢出。