flex兼容问题

目的：

在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 */
}