旧的弹性盒在移动端兼容

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-around;-ms-flex-pack:justify;justify-content:space-around;}

 后记:这个兼容写法很不全。新的弹性盒特性没有体现出来。旧版盒子和新版盒子的兼容性问题有很多,比如很多手机浏览器已经兼容弹性盒子,但在微信x5内核中诸多不兼容

最好的解决方法是多写兼容的语法。例如在sublime中用autoprefixer 自动补全插件做兼容;

posted @ 2016-12-15 09:32  李元夕cool  阅读(356)  评论(0编辑  收藏  举报