使用Flexbox碰到了什么样的坑

微信公开课小程序热门讨论「使用Flexbox碰到了什么样的坑」最新回复-1，flexbox有多个版本，在低版本安卓下实行的是09年的旧版标准FlexibleBoxLayoutModule这个标准需要添加webkit前缀。其余的实行的是新的flexbox标准CSSFlexibleBoxLayoutModuleLevel1，其中ios9以下Safari需要添加webkit前缀。2，旧版flexbox标准各浏览器支持属性有限，比如说不支持flexwrap等。所以如果考虑兼容性的话需要只使用旧版标准中浏览器可以支持的属性。3，还是旧版的问题，旧版的使用比例伸缩布局时会导致盒子内容大小不等会导致无法‘等分’等布局。这个时候需要设置width:0%;等把原始大小设置成0。4，依旧是旧版的问题，旧版的boxitem要求属性是块级结构，所以很多inline元素需要设置display：block等才能显示正常。5,新发现textoverflow:ellipsis;在display：flex元素上无效。
例如/*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，第一个框的宽度被压缩了。 更多有关「使用Flexbox碰到了什么样的坑」的疑问请扫码关注微信公开课+小程序！