小程序在 iphone6中的flex布局 兼容性

项目上线后，被体验用户截图了。样式完全爆炸。

 我当时也差点原地爆炸了。因为在测试开发阶段，没有看到这样的情况出现。一时间有点慌张，哈哈哈哈，其实 还好。

仔细发现，就会察觉到是flex布局的兼容性问题了，在日常开发中，我似乎没有养成这样需要display:-webkit-flex；这样多书写一行代码的习惯，因为觉得现在大多数人的手机不应该那么老。现在开来，做开发还是需要多照顾那些在2019年还用iphone6手机的用户。（哈哈哈）；

在这里总结下兼容性写法：

父容器模块

display:flex;

display:-webkit-flex;

justify-content: space-between;

-webkit-justify-content: space-between;

align-items:center;

-webkit-align-items: center;

 

/*父元素-横向换行 */
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap:wrap;
 

子容器模块

/*子元素-垂直居中（在侧轴、纵轴上）*/【新版本语法】
 -webkit-align-items:center;
 -moz-align-items:center;
 -ms-align-items:center;
 -o-align-items:center;
 align-items:center;


/* 子元素—平分比例 */ 
 -prefix-box-flex: 1; /* old spec webkit, moz */
 -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
 -webkit-flex: 1;          /* Chrome */
 -moz-box-flex: 1;         /* Firefox 19- */
 -ms-flex: 1;              /* IE 10 */
 width:20%;
 flex: 1;                  /* NEW,  Opera 12.1, Firefox 20+ */
 flex: 2;