使用Flexbox碰到了什么样的坑

发布网友发布时间：2022-04-22 01:26

共2个回答

热心网友时间：2022-04-06 13:25

1，flexbox有多个版本，在低版本安卓下实行的是09年的旧版标准Flexible Box Layout Mole
这个标准需要添加-webkit-前缀。其余的实行的是新的flexbox标准CSS Flexible Box Layout Mole 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元素上无效。

热心网友时间：2022-04-06 14:43

例如/*display:flex*/.box{display:flex;width:300px;}.boxdiv{height:30px;border:1pxsolid#F00;box-sizing:border-box;flex:1;}/*display:-webkit-box*/.box{display:-webkit-box;width:300px;}.boxdiv{height:30px;border:1pxsolid#F00;box-sizing:border-box;-webkit-box-flex:1;}第一个框第二个框第二个框第二个框第二个框第二个框第二个框第二个框第二个框使用flex，两个框的宽度是一样的使用box，第一个框的宽度被压缩了。