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）