在一些旧的版本上,display:flex的使用,还是有限制,导致页面效果崩坏
例如:
正确兼容:
1.对定义display:flex;的元素
display:-webkit-box;
display:flex;
display:-webkit-flex;
display:-ms-flexbox;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
2.对定义flex:1的元素
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
原理:
低版本的flex效果沿用box的属性
注意:
display:-webkit-box;是需要额外增加属性,是不同版本对css1,css2,css3生效不生效的兼容处理
而flex的前缀-wibkit-之类,是对内核处理同种属性时的兼容处理,在sass编译的时候,能够自动添加,普通css文件需要手动罗列,需要根据开发文件的安排,自定义选择