网页美工设计

网页设计flex布局浏览器兼容解决方案

编辑：时间：2017-12-15 10:59:20

　　虽然flex布局早在2009年就有了，而现在是2015年8月10日，使用最新的flex语法会发现支持程度并不好，即使是在“高端”浏览器上也是如此，比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同

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

　　Flexbox布局的语法经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法版本众多，浏览器支持不一致，致使Flexbox布局使用不多。

　　Flexbox布局主要有三种语法版本：

　　2009版本，我们称之为老版本，使用的是“display:box”或者“display:inline-box”;

　　2011版本，我们称之为混合版本，使用的是“display:flexbox”或者“display:inline-flexbox”;

　　2013版本，也就是最新语法版本，使用的是“display:flex”或者“display:inline-flex”。

　　我们需要把Flexbox旧的语法、中间过渡语法和最新的语法混在一起使用，在这里他们的顺序显得非常重要。“display”属性本身并不添加任何浏览器前缀，我们需要确保我们老语法不要覆盖新语法让浏览器(可能总是会)同时支持。

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

　　建议在需要兼容Android时(2009版语法)采用flex-h/flex-v声明容器使用flex模式，在不需要兼容Android时(2012版语法)使用flex设置容器

　　lex布局非常适宜当前的移动设备和大屏幕浏览器网页开发非常的便捷，是未来网页开发布局设计的方向，是一个未来技术。flex布局能够编写代码小，各种宽度、高度、位置都由浏览器自身按照既定规则完成适配，跨平台无障碍阅读体验。

　　css3 flex特点

　　一旦一个容器赋予了display:flex属性，将会有以下特点：

　　项目无法设置浮动。

　　列表的样式会被清除。

　　无法使用vertical-align设置垂直对齐方式。

推荐资讯

郑州平面设计培训：清新教育坚持学会为止

相关资讯

有问题需要老师在线解答？立即提问马上回复

更多 热门课程排行榜

更多 报名答疑招生问答

全部课程分类