使用Flexbox:新旧语法混用实现最佳浏览器兼容
2014-09-17 22:21
369 查看
HTML结构
一个具有语义化的容器“page-wrap”,包裹了三个主要区域,并将容器设置为伸缩容器,此时容器中的每外区域自动变成了伸缩项目。<div class="page-wrap"> <section class="main-content" role="main"> Main content: first in source order </section> <nav class="main-nav" role="navigation"> Links </nav> <aside class="main-sidebar" role="complementary"> Sidebar </aside> </div>
我们最终要实现的效果如下:
伸缩容器
我们需要使用我们的列在一个伸缩容器中显示上下文。只有这样,这些元素才能直接成为伸缩项目。他们之前是什么没有关系,只要现在他们是伸缩项目。我们需要把Flexbox旧的语法、中间过渡语法和最新的语法混在一起使用,在这里他们的顺序显得非常重要。“display”属性本身并不添加任何浏览器前缀,我们需要确保我们老语法不要覆盖新语法让浏览器(可能总是会)同时支持。
.page-wrap { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
控制列宽
我们目标是制作一个20%、60%、20%网格布局。第一步设置我们主内容区域宽度为60%。
第二步设置侧边栏来填补剩余的空间。
同样把新旧语法混在一起使用:
.main-content { width: 60%; } .main-nav, .main-sidebar { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 20%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
在新的语法中,没有必要给边栏设置宽度,因为他们同样会使用20%比例填充剩余的40%空间。但是我发现,如果不给他们显式的设置宽度,在老的语法下会直接崩溃。
重排列的顺序
我希望主内容排列在中间,但在源码之中他是排列在第一的位置。使用Flexbox可以非常容易实现,但是我们需要把Flexbox几中不同的语法混在一起使用:.main-content { -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .main-nav { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .main-sidebar { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; }
支持的浏览器
如果你将Flexbox多版本混合在一起使用,可以得到以下浏览器的支持:Chrome any
Firefox any
Safari any
Opera 12.1+
IE 10+
iOS any
Android any
最在的限制当然是IE浏览器了,但在其他方面很好。如果你正在做一个特定的移动版本网站,你也会得到更好的支持。如果有谁在window版本手机上测试,麻烦告诉我一下测试结果。
Firefox19有点问题,你需要在观察一下它。例如,在这个案例中,我无法近死侧边栏为20%。这个只是折叠到内容的宽度里,这样说或许有点武断。我需要设置“-moz-box-flex:1”,否则主内容(60%)会伸展到和最宽的段落,就像是段落设置了“white-space:nowrap”,这一点简直是莫名其妙。
DEMO
CODEPEN的案例如需转载烦请注明出处:http://www.w3cplus.com/css3/using-flexbox.html
相关文章推荐
- 使用Flexbox:新旧语法混用实现最佳浏览器兼容
- 使用Flexbox:新旧语法混用实现最佳浏览器兼容
- 使用Flexbox:新旧语法混用实现最佳浏览器兼容
- 使用css实现全兼容浏览器的三角形
- 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器
- 现在实现flexbox 的策略和工具(flexbox兼容到IE8的跨浏览器解决方案)
- JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
- 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器
- 使用jQuery实现文本框input定位到文字最后(兼容所有浏览器)
- 使用 audio 和 embed 实现浏览器兼容的网页声音播放
- 如何使用iframe实现跨域写入cookie 并且兼容大部分浏览器
- 用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox
- 用JS实现渐变效果,兼容各款浏览器
- 使用浏览器Cache和http状态码304实现的客户端缓存
- 使用css3选择器,兼容多浏览器
- 使用div+CSS布局浏览器不兼容原因及解决办法
- Step1数据系统技术(3.使用浏览器Cache和http状态码304实现的客户端缓存)
- CSS实现兼容浏览器的文字阴影效果
- javascript radio list的实现细节(多浏览器兼容)