本文讨论了在移动端使用Flexbox布局的实践经验及兼容性问题。针对不同版本的浏览器和操作系统（如安卓4.0+、iOS），提供了具体的解决方案，并列举了在使用过程中遇到的各种坑及解决办法。
经过了一番实践和一些基本的兼容处理，至少在移动端flexbox还是有可为的（安卓4.0+，2.3+没测试，ios都还行）。但是坑也确实还有很多。
1，flexbox有多个版本，在低版本安卓下实行的是09年的旧版标准 Flexible Box Layout Module
这个标准需要添加-webkit-前缀。其余的实行的是新的flexbox标准 CSS Flexible Box Layout Module Level 1，其中ios9以下Safari需要添加-webkit-前缀。
2，旧版flexbox标准各浏览器支持属性有限，比如说不支持flex-wrap等。所以如果考虑兼容性的话需要只使用旧版标准中浏览器可以支持的属性。
3，还是旧版的问题，旧版的使用比例伸缩布局时会导致盒子内容大小不等会导致无法‘等分’等布局。这个时候需要设置width:0%;等把原始大小设置成0。
4，依旧是旧版的问题，旧版的box item要求属性是块级结构，所以很多inline元素需要设置display：block等才能显示正常。
5, 新发现 text-overflow: ellipsis;在display：flex元素上无效。
1，flexbox有多个版本，在低版本安卓下实行的是09年的旧版标准 Flexible Box Layout Module
这个标准需要添加-webkit-前缀。其余的实行的是新的flexbox标准 CSS Flexible Box Layout Module Level 1，其中ios9以下Safari需要添加-webkit-前缀。
2，旧版flexbox标准各浏览器支持属性有限，比如说不支持flex-wrap等。所以如果考虑兼容性的话需要只使用旧版标准中浏览器可以支持的属性。
3，还是旧版的问题，旧版的使用比例伸缩布局时会导致盒子内容大小不等会导致无法‘等分’等布局。这个时候需要设置width:0%;等把原始大小设置成0。
4，依旧是旧版的问题，旧版的box item要求属性是块级结构，所以很多inline元素需要设置display：block等才能显示正常。
5, 新发现 text-overflow: ellipsis;在display：flex元素上无效。
作者：龙博韬
链接：https://www.zhihu.com/question/29924791/answer/46255686
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
