隨著自己寫過的頁面的增多，也遇到了許多CSS相容性的問題。這些相容性問題，都是必然的，因為技術不斷進步，那麼為了不被淘汰，我們就要做些相容性處理。這篇文章主要介紹了CSS中flex的兼容,需要的朋友可以參考借鑒，下面來一起看看吧。
前言
我寫頁面的時候用過很多的flex佈局，覺得非常好用。以下附上一篇不錯的flex版面介紹的文章。
Flex 佈局教學想了解的可以自己去看看這篇博文，或者自己百度，這裡先部多做介紹，我們主要來說一說flex佈局的兼容性問題。
why?
大家可能想問了，flex佈局為什麼會有相容性問題啊？
之所以有相容性問題，是因為技術不斷的更新，有些舊的瀏覽器只支援舊語法的書寫方式，所以就出現所謂的相容性問題。
what？
那麼新舊版本是什麼？
flex佈局分為舊版dispaly: box;，過渡版本dispaly: flex box;，以及現在的標準版本display: flex;。所以如果你只是寫新版本的語法形式，是肯定有相容性問題的。
Android
2.3 開始就支援舊版display:-webkit-box;
4.4 開始支援標準版display : flex;
IOS
6.1 開始支援舊版display:-webkit-box;
PC
#how？
所以我們該如何進行相容性的寫法呢？盒子的相容性寫法
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}子元素的相容性寫法
.flex1 {
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}所以上面的相容寫法應該是這樣的才對:
.box{
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}以上是深入理解CSS系列之flex相容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
