前端 - 使用css3 flex布局在手机uc浏览器中一塌糊涂?
怪我咯
怪我咯 2017-04-17 12:01:04
[HTML讨论组]

看了一篇flex的文章如获至宝,然后运用到项目中。
测试的时候别人的的手机都没有问题,但我手机用uc打开之后布局就没有起作用,不知是uc不支持
display:flex吗?那打击也太大了,代码如下

ul{ display: flex; display: -webkit-flex; width: 97.5%; margin: 12px auto 0; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; } li{ width: 49%; position: relative; margin-bottom: 7px; }

还有这个是嵌套的flex布局

    • p{ width: 97%; margin: 15px auto; display: flex; display: -webkit-flex; } p p{ font-size: 1.8rem; color: #fff; padding: 12px 8px; background-color: #0e67ba; } p ul{ display: flex; flex-grow: 1; -webkit-flex-grow: 1; background-color: #e0e0e0; } p ul li{ width: 25%; font-size: 1.4rem; color: #000; text-align: center; } 请大家帮忙看看?
怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(4)
怪我咯

首先所有 webkit 内核的浏览器(包括移动端)都支持 flex 布局,只不过一些浏览器只支持旧语法,如:display: -webkit-box 这样。我估计 UC 支持的是旧语法。

旧语法和标准的 flex 语法有较大区别,需要做好兼容。不过好消息是,你可以来使用 Autoprefixer 来自动处理这些兼容性问题,而你只需要写标准的语法就好了。

以我的个人经验来讲,旧语法中除了没有 flex-wrap 对应的属性外,其他的都可以找到对应的表示方法。

伊谢尔伦

其实用table cell 也是一样的好用。支持的更好。

PHP中文网

为了解决flex的兼容性问题,以及快速上手,我开发了flex.css。目前已经在众多项目中使用,楼主可以试试,兼容微信和UC:https://github.com/lzxb/flex.css

怪我咯

给的链接https://github.com/lzxb/flex已经不存在了啊

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号