flex在安卓4.3中的兼容方式

最新推荐文章于 2021-05-27 05:34:05 发布

quake_walk

最新推荐文章于 2021-05-27 05:34:05 发布

阅读量7.1k

点赞数

分类专栏： CSS 文章标签： flex css

本文链接：https://blog.csdn.net/quake_walk/article/details/52298303

版权

本文介绍了在阅读阮一峰关于flex布局的文章后，如何利用flex来简化页面布局，特别是在垂直居中等场景下。然而，在实际应用中，发现在安卓4.3及以下版本存在兼容性问题。除使用浏览器前缀外，解决方案是为元素添加width属性以确保兼容。参考链接包括flex语法教程、实例演示以及兼容性查询。

摘要由CSDN通过智能技术生成

小弟最近看完阮一峰大神的关于flex的文章后感觉flex对于实现现在业务（微博众筹：http://plat.cf.weibo.com/ ）中的一些页面布局颇为方便，比之前单纯的用一些css的技巧来实现更为简便（e.g. 垂直居中）。但在实际使用中发现flex对于安卓系统的较低版本（<4.3）中还是有一些兼容问题的，除了用相应的浏览器前缀外还需要加上width属性。

具体的兼容方法如下：

.foo {
    display: box;              /* OLD - Android 4.4- */
    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; 

    -webkit-box-flex: 0 0 34.4%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0 0 34.4%;         /* OLD - Firef