目的：

在web移動(dòng)端項(xiàng)目開發(fā)中，經(jīng)常會(huì)遇到各種各樣的兼容性問題，但是之前都缺少總結(jié)，以前踩的坑可能還會(huì)再去踩一遍，所以這邊做個(gè)總結(jié)，讓之后來的新同事能夠知道、了解我們之前踩的坑，并且之后開發(fā)中避免再入坑，提升開發(fā)效率；這邊要講的是flex的兼容問題；

支持：

flex布局分為舊版本dispaly: box;，過渡版本dispaly: flexbox;，以及現(xiàn)在的標(biāo)準(zhǔn)版本display: flex;

Android 2.3 開始就支持舊版本 display:-webkit-box; 4.4 開始支持標(biāo)準(zhǔn)版本 display: flex;

IOS 6.1 開始支持舊版本 display:-webkit-box; 7.1 開始支持標(biāo)準(zhǔn)版本 display: flex;

PC 如果你不需要兼容ie10以下版本，也是可以使用flex

問題：

flex-wrap 這個(gè)css屬性的作用是是否換行，但是這個(gè)屬性兼容問題很大，在IOS8及以下的機(jī)型中是不兼容的；所以在開發(fā)中一定要注意這個(gè)點(diǎn)，盡量使用其它布局替換，不要使用這個(gè)屬性；

推薦使用第三方庫(kù)（引用地址：https://cnodejs.org/topic/56d1148d9f876b7e6658579e）：

這邊推薦使用flex.css，使用簡(jiǎn)單、代碼簡(jiǎn)潔；

安裝：npm install flex.css --save

使用：

<!-- flex屬性匹配，簡(jiǎn)單的子元素居中例子： -->
  <div flex="main:center cross:center" style="width:500px; height: 500px; background: #108423">
    <div style="background: #fff">看看我是不是居中的</div>
  </div>

<!-- data-flex屬性匹配，簡(jiǎn)單的子元素居中例子： -->
  <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：從左到右（默認(rèn)）

main：主軸對(duì)齊方式
    right：從右到左
    left：從左到右（默認(rèn)）
    justify：兩端對(duì)齊
    center：居中對(duì)齊

cross：交叉軸對(duì)齊方式
    top：從上到下
    bottom：從上到下
    baseline：跟隨內(nèi)容高度對(duì)齊
    center：居中對(duì)齊
    stretch：高度并排鋪滿（默認(rèn)）

box：子元素設(shè)置
    mean：子元素平分空間
    first：第一個(gè)子元素不要多余空間，其他子元素平分多余空間
    last：最后一個(gè)子元素不要多余空間，其他子元素平分多余空間
    justify：兩端第一個(gè)元素不要多余空間，其他子元素平分多余空間

flex-box屬性說明： 取值范圍(0-10)，單獨(dú)設(shè)置子元素多余空間的如何分配，設(shè)置為0，則子元素不占用多余的多余空間 多余空間分配 = 當(dāng)前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 */
}