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形式的。

下面是各個瀏覽器的支援情況

• 盒子的相容性寫法

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