flex兼容性问题

Posted on   |   In   |  

最近在做‘悠客生鲜’手机端，想用flex做一下，却发现原来还有兼容性问题
主要是ios9以下，不能直接使用flex，ios9没问题

display:flex的兼容性

1
2
3
4
5
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

flex兼容性

-webkit-flex: 1;
-moz-box-flex: 1;
-webkit-box-flex: 1;
-o-box-flex: 1;
-ms-flex: 1;
flex: 1;

其他

-webkit-flex-direction: column;
flex-direction: column;


-webkit-justify-content: space-between;
justify-content: space-between;


-webkit-align-self: flex-end;
align-self: flex-end;

bug

慎用flex，兼容性问题太大了，学习用还可以，别用在生产环境
2.3-4.3的Android浏览器还是不支持flex的