用Flexbox创建两列等宽布局

2015-08-04阅读(16393)评论(0)牵着狗狗看MM

苏州实时公交查询

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个子元素

[html]<div class="flexbox-container">
<div><h3>Column 1</h3></div>
<div><h3>Column 2</h3></div>
</div>
[/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%的宽度。子元素可以添加填充,边框,不用担心会溢出。

Demo

赞(1) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 用Flexbox创建两列等宽布局
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏