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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 子元素的相容性寫法

.flex1 {  
    -webkit-box-flex:    /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: ;     /* OLD - Firefox 19- */              
    -webkit-flex: ;      /* Chrome */  
    -ms-flex:            /* IE 10 */  
    flex: ;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
}           

• 1
• 2
• 3
• 4
• 5
• 6
• 7

這種相容寫法不一定起效的。尤其是在底版本安卓系統中。因為什麼呢?因為所有都是向下相容的，是以寫法的順序一定要寫好了才起作用。就是把舊文法寫在底下，個别不相容的移動設定才會識别，哪些是舊的文法，你懂的。那些帶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: ;        /* Chrome */  
    -ms-flex:              /* IE 10 */  
    flex: ;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex:      /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: ;       /* OLD - Firefox 19- */       
}