解決flex佈局新舊版本的兼容性寫法

最新開發h5的項目用了css的新特性flex佈局，遇到了CSS兼容性的問題。在網上找到了以下的解決辦法。

我寫頁面的時候用到過不少的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;
  • 7.1 開始支持標準版本display: flex;
• PC 
  ie10開始支持，可是IE10的是-ms形式的。

下面是各個瀏覽器的支持狀況

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的必定要寫在最下面便可。

因此上面的兼容寫法應該是這樣的纔對:

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

總結

這樣來試試吧，保證不會再出現返工修改的問題。 
good luck！

最後

我不是大神，也不是什麼牛人，寫這個號的目的是爲了記錄我自學 web全棧 的筆記。

有興趣的朋友能夠掃下方二維碼公衆號—— 愛寫bugger的阿拉斯加

分享 web 開發相關的技術文章，熱點資源，全棧程序員的成長之路

和你們一塊兒交流成長。

只要關注公衆號並回復 福利 便送你六套、而且每套價值 3999 元的視頻資源： Python、Java、Linux、Go、vue、react、javaScript