移动端flex.css布局神器，兼容微信，UC，webview等移动端主流浏览器2.28
发布于 25 天前 作者 1340641314 1278 次浏览 最后一次编辑是 24 天前 来自 分享

因为最近项目比较多，所以才花时间写了这个布局使用的flex.css，暂时只支持移动端，仍然会不断完善和优化，致力于一款轻量级的flex快速布局神器。 求关注，求扩散：https://github.com/1340641314/flex 深圳html5开发者社群：170761660

必看问题：移动端不能完整的支持flex布局？ flex是一个非常好的css3布局，但是在移动端很多浏览器不支持display: flex，仅支持display: -webkit-box，所以flex.css写了三种语法： display: -webkit-box; display: -webkit-flex; display: flex;

只需要调用flex.css相关的class，就能保证兼容移动端各种主流浏览器，微信端和webview上完美运行。 1.png

14 回复

不错不错，以后就用 flex 来写微信布局了

Are you sure? uc不支持display:flex

@dlutwuwei overflow: hidden; display: -webkit-box; display: -webkit-flex; display: flex;

新旧版本两种语法都写了，不支持新版本，会调用旧版本的语法，只要调用flex.css就能兼容了

@XGHeaven 我也是很烦每次都要写新版本和旧版本的兼容语法，所以才整理处理，写了这个flex.css类库

display: flex; —>

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

这种事给 autoprefixer 来做就好啦

@aidenzou 第一次听说这个，长见识了

@1340641314 UC用的是display:box，这个标准大部分浏览器都不支持

@1340641314 你的想法是好的，像 @aidenzou 说的把这部分交给工程化吧。更能提高开发体验。

@dlutwuwei 所以才写了两个版本，才能保证使用

@yunkou 你说的那个是把写的css编译成兼容的吧，我这个写的是一个快速布局的class，直接拿去调用就可以直接布局

用less封个函数也行啊,没必要单独分个css文件出来吧

一开始还以为是做了兼容，让不支持 flex 的浏览器也能实现差不多的效果。 如果只是在语法上做兼容的话，是不是直接 autoprefixer 就可以了，感觉这个项目意义不大。

@baka397 你都没看明白，这是把flex布局常用的布局封装成class，div布局时直接调用class就布局出来了，而不是每一次要使用的时候都去写一次css

@kisnows autoprefixer 还需要自己写css，这个是把flex常用的css都封装好了，直接调用相关的class就可以直接布局了，而不用你再次写css

回到顶部