彈性佈局各類坑爹兼容

固然也看到過遇到flexbox佈局的屬性將全部的新的老的前綴都加上的，這樣省事啊 誰閒着沒事成天研究那幾個屬性的兼容，更可況前端發展這麼快說不定有更牛逼的樣式出現

可是想在移動端用好這個佈局摸透這個屬性 我仍是一個個都探究下吧，在此先說下各瀏覽器PC端最新版本狀況目前：IE最新版本是ie11， FF最新版本是ff41.0， Chrome最新版本是chrome45.0， Safira最新版本8.0.3， opera最新版本是31 然而這些最新版本對咱們來講並沒什麼卵用 只是個標準 沒有誰電腦裝的都是最新版瀏覽器，好吧 看下各個屬性兼容

display:box/flexbox/flex 先看這個定義彈性佈局盒子 附上兼容圖

仍是比較直觀對此屬性作兼容只需以下

    display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

定義子元素排列

目前有兩種新的寫法flex-direction和舊的寫法box-orient+box-direction，

新寫法flex-direction的兼容

舊寫法box-orient和box-direction兼容同樣的

能夠看出，ie11下版本仍是不支持方向這屬性，其餘瀏覽器要加前綴，因此當要定義方向時這個兼容能夠寫成

    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;

用box-orient:horizontal + box-direction:normal/reverse能夠達到flex-direction:row/row-reverse效果

用box-orient:vertical + box-direction:normal/reverse能夠達到flex-direction:column/column-reverse效果

 

定義子元素換行狀況

新寫法flex-wrap 兼容以下

舊寫法box-lines:single/multiple 默認single  兼容以下

ie11下仍是不支持此屬性，上面firefox不支持但在25版本後是支持的，仍是要用flex加-moz, 比較直觀因此定義子元素換行時 能夠以下寫法

　　-webkit-flex-wrap:wrap;
    -webkit-box-lines:multiple;
    -moz-flex-wrap:wrap;
    flex-wrap:wrap;

 

flex-flow

這個是上面兩個屬性的合寫

flex-flow兼容

爲了兼容到舊的瀏覽器就須要用到box-orient+box-lines配合 故兼容能夠以下寫

    -webkit-flex-flow:row wrap;
    -webkit-box-orient:horizontal;
    -webkit-box-lines:multiple;
　　-moz-flex-flow:row wrap;
    box-orient:horizontal;
    box-lines:multiple;
    flex-flow:row wrap;

橫向排列布局

新版本justify-content的兼容狀況

舊版本box-pack的兼容狀況

故兼容可寫成：

-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit--moz-box-pack:center;
box-pack:center;

豎向排列布局

新版本align-items兼容狀況

舊版本box-align的兼容狀況

故兼容性可寫成：

align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;

伸縮盒子佈局兼容

新版本flex:num兼容

舊版本box-flex兼容

故兼容性可寫成

box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;

 元素出現順序

新版本order:num兼容

舊版本border-order:num兼容

故兼容性可寫成

box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
order:num;
-webkit-order:num;

 

。。。哎 也是醉了 這玩意這麼多屬性 一個個研究兼容 可能有些會不全面但大部分是這樣 還有個就是ie兼容可能寫的不夠全 有的是在舊版本多加個-ms 不是不支持這個屬性麼 也不知道加上有什麼意思， 醉人的佈局  強大是沒的說 問題也是一大堆啊！！！