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;

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