搜索
javascript - 微信和qq内置浏览器是否支持flex
巴扎黑
巴扎黑 2017-04-10 16:32:23
[JavaScript讨论组]

都说微信和qq内置浏览器不支持flex,我写了个页面,在微信里跑了一下,发现确实是这样。

但是为什么qq会员充值页面里的flex在微信和qq内置浏览器内是支持的呢?
如下:
1.登录手机qq, 打开左边的抽屉式菜单,选择“开通会员”,会跳转到一个html5页面(请忽略我的昵称,呵呵)

2.这个页面充斥着大量的flex,比如最下面的一个导航栏

3.这个导航栏是由四个li组成的,ul通过用display:-webkit-flex使4个li排成一排,这在代码里写的清清楚楚

复制这个页面的地址到微信中,打开也显示正常

4.那么问题来了,是不是说qq和微信内置浏览器已经支持flex了呢? 为什么我照着这个样子写,却在微信和qq中显示不正常呢?该加的前缀我也加了啊,webkit-box-也加了啊!

好困惑,请哪位同仁有过这方面经验的告知一下,谢谢!

巴扎黑
巴扎黑

全部回复(6)
PHP中文网

微信浏览器是可以支持flex的。我猜题主遇到我以前的问题:以为给display加上-webkit-就万事大吉。
但事实上justify-content这些属性也要加-webkit-的。
附上我自己的一段样式。亲测有效。

.flexbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    
}
.flexbox > .item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: center;
    align-self: center;
}
阿神

你可以下载一个qq浏览器可以调试微信里面的h5,微信支持旧版的flex

天蓬老师

我一直用着没发现不支持

怪我咯

现在不要用,不然会后悔,我问过了,QQ浏览器至少明年才支持,然后才上QQ和微信。

高洛峰

webkit-box 可以,移动端要新旧都兼容,部分手机兼容新版,部分是旧版,写的时候注意display

怪我咯

在移动端开发中,并不是所有的浏览器,webview,微信等各种版本都支持标准的flex,
但是基本上都会支持-webkit-box,所以flex.css的主要作用是保证每一个属性都能支持标准flex或旧版本的-webkit-box。
由于flex.css采用了autoprefixer编译,所以能够保证在浏览器不支持标准flex布局的情况下,
回滚到旧版本的-webkit-box,保证移动设备中能呈现出一样的布局效果。

https://github.com/1340641314/flex

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

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