彈性布局各種坑爹相容

當然也看到過遇到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 不是不支援這個屬性麼也不知道加上有什麼意思，醉人的布局強大是沒的說問題也是一大堆啊！！！

彈性布局各種坑爹相容

11 11借光棍節各種優惠和各種坑爹

常用彈性布局及其相容性寫法

坑爹的IE6相容性問題

彈性布局各種坑爹相容

11 11借光棍節各種優惠和各種坑爹

常用彈性布局及其相容性寫法

坑爹的IE6相容性問題

相關推薦