flex兼容ios(iphone6)

开发过程使用flex简直不要太6,但是如果只是写新版本的语法形式,是肯定存在兼容性问题的(安卓机基本没啥问题,主要是ios)

一、须知

flex布局分为旧版本dispaly: box;过渡版本dispaly: flex box;以及现在的标准版本display: flex;

Android

     2.3 开始就支持旧版本display:-webkit-box;

     4.4 开始支持标准版本display: flex;

IOS

     6.1 开始支持旧版本display:-webkit-box;

     7.1 开始支持标准版本display: flex;

PC

      ie10开始支持,但是IE10的是-ms形式的

二、解决

注意:把旧语法写在底下(ps:css向下兼容),否则无效


盒子写法

display:-webkit-flex;      /* 新版本语法: Chrome 21+ */

display:flex;                  /* 新版本语法: Opera 12.1, Firefox 22+ */

display:-webkit-box;    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

display:-moz-box;      /* 老版本语法: Firefox (buggy) */

display:-ms-flexbox;  /* 混合版本语法: IE 10 */


子元素写法

-webkit-flex:1;        /* Chrome */

-ms-flex:1;              /* IE 10 */

flex:1;                     /* NEW, Spec - Opera 12.1, Firefox 20+ *

/-webkit-box-flex:1  /* OLD - iOS 6-, Safari 3.1-6 */

-moz-box-flex:1;      /* OLD - Firefox 19- */


例子(兼容iphone 6)


flex兼容ios(iphone6)_第1张图片
属性顺序很重要











你可能感兴趣的:(flex兼容ios(iphone6))