目的：
在web移动端项目开发中，经常会遇到各种各样的兼容性问题，但是之前都缺少总结，以前踩的坑可能还会再去踩一遍，所以这边做个总结，让之后来的新同事能够知道、了解我们之前踩的坑，并且之后开发中避免再入坑，提升开发效率；这边要讲的是flex的兼容问题；
支持：
flex布局分为旧版本dispaly: box;，过渡版本dispaly: flexbox;，以及现在的标准版本display: flex;
Android 2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex;
IOS 6.1 开始支持旧版本 display:-webkit-box; 7.1 开始支持标准版本 display: flex;
PC 如果你不需要兼容ie10以下版本，也是可以使用flex
问题：
flex-wrap 这个css属性的作用是是否换行，但是这个属性兼容问题很大，在IOS8及以下的机型中是不兼容的；所以在开发中一定要注意这个点，尽量使用其它布局替换，不要使用这个属性；
推荐使用第三方库（引用地址：https://cnodejs.org/topic/56d1148d9f876b7e6658579e）：
这边推荐使用flex.css，使用简单、代码简洁；
安装：npm install flex.css --save
使用：
<!-- flex属性匹配，简单的子元素居中例子： -->
<div flex="main:center cross:center" style="width:500px; height: 500px; background: #108423">
<div style="background: #fff">看看我是不是居中的</div>
</div>
<!-- data-flex属性匹配，简单的子元素居中例子： -->
<div data-flex="main:center cross:center" style="width:500px; height: 500px; background: #f1d722">
<div style="background: #fff">看看我是不是居中的</div>
</div>
flex属性大全：
dir：主轴方向
top：从上到下
right：从右到左
bottom：从上到下
left：从左到右（默认）
main：主轴对齐方式
right：从右到左
left：从左到右（默认）
justify：两端对齐
center：居中对齐
cross：交叉轴对齐方式
top：从上到下
bottom：从上到下
baseline：跟随内容高度对齐
center：居中对齐
stretch：高度并排铺满（默认）
box：子元素设置
mean：子元素平分空间
first：第一个子元素不要多余空间，其他子元素平分多余空间
last：最后一个子元素不要多余空间，其他子元素平分多余空间
justify：两端第一个元素不要多余空间，其他子元素平分多余空间
flex-box属性说明： 取值范围(0-10)，单独设置子元素多余空间的如何分配，设置为0，则子元素不占用多余的多余空间 多余空间分配 = 当前flex-box值/子元素的flex-box值相加之和
自己写兼容：
兼容写法如下：
/**flex 兼容写法 定义flex布局**/
.dis-flex {
display: flex;
display: -webkit-flex;
display: -webkit-box;
}
/**flex 兼容写法 垂直居中**/
.flex-vertical-center {
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
-webkit-box-align: center;
}
/**flex 兼容写法 垂直居上**/
.flex-vertical-start {
align-items: flex-start;
-o-align-items: flex-start;
-ms-align-items: flex-start;
-moz-align-items: flex-start;
-webkit-align-items: flex-start;
-webkit-box-align: start;
}
/**flex 兼容写法 垂直居下**/
.flex-vertical-end {
align-items: flex-end;
-o-align-items: flex-end;
-ms-align-items: flex-end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
-webkit-box-align: end;
}
/**flex 兼容写法 水平居中**/
.flex-horizontal-center {
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-webkit-box-pack: center;
}
/**flex 兼容写法 水平居左**/
.flex-horizontal-start {
justify-content: flex-start;
-o-justify-content: flex-start;
-ms-justify-content: flex-start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
-webkit-box-pack: start;
}
/**flex 兼容写法 水平居右**/
.flex-horizontal-end {
justify-content: flex-end;
-o-justify-content: flex-end;
-ms-justify-content: flex-end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
-webkit-box-pack: end;
}
/**flex 兼容写法 水平居两边**/
.flex-horizontal-between {
justify-content: space-between;
-o-justify-content: space-between;
-ms-justify-content: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-webkit-box-pack: justify;
}
/**flex 兼容写法 纵向排列**/
.flex-column {
flex-direction: column;
-o-flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
}
/**flex 兼容写法 子元素纵向换行**/
.flex-vw {
/*-webkit-box-lines: multiple;*/
flex-wrap: wrap;
-o-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
/**flex 兼容写法 子元素纵向换行**/
.flex-nvw {
/*-webkit-box-lines: multiple;*/
flex-wrap: nowrap;
-o-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
box-lines: single;
-webkit-box-lines: single;
}
/**flex 兼容写法 子元素不填充剩余位置**/
.flex-0 {
flex: 0 1 auto;
-ms-flex: 0 1 auto; /* IE 10 */
-webkit-flex: 0 1 auto; /* Chrome */
box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto; /* Firefox */
-webkit-box-flex: 0 1 auto; /* Safari 和 Chrome */
}
/**flex 兼容写法 子元素填充剩余位置**/
.flex-1 {
flex: 1 1 auto;
-ms-flex: 1 1 auto; /* IE 10 */
-webkit-flex: 1 1 auto; /* Chrome */
box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto; /* Firefox */
-webkit-box-flex: 1 1 auto; /* Safari 和 Chrome */
}
