CSS3之flex兼容寫法

很久不寫博文，之前的長時間不上都關閉了，但隨著工作時間長越來越長，對知識的積累和總結還真的是很重要的。所以奉勸碼農們每天都還是要抽出來一點時間總結點東西，以后對你受益匪淺！！今天還是變談CSS3里的flex怎么處理兼容的

flex是個非常好用的屬性，如果說有什么可以完全代替 float 和 position ，那么肯定是非它莫屬了，雖然現在低版本瀏覽器不支持，可是對于移動來說兼容性不是問題，可是在安卓4.3以后版本里。那就不好用了，今天咱們就說下如果寫flex才能保證兼容性。

flex之所以有兼容性。是因為w3c從09到現在更新了很多次，所以有一些瀏覽器只是支持舊語法的書定方式，flex屬性有很多種，今天主要說常用的等比設置和居中這兩塊

一、舊語法

.box{
    display: -moz-box;    /*Firefox*/
    display: -webkit-box; /*Safari,Opera,Chrome*/
    display: box;
}

2.容器屬性

 1)box-pack box-pack屬性總共有4個值：

.box{    box-pack: start | end | center | justify;
        /*主軸對齊：左對齊（默認） | 右對齊 | 居中對齊 | 左右對齊*/}

3.子元素屬性

 box-flex 屬性：

.item{
    -moz-box-flex: 1.0;    /*Firefox*/
    -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
    box-flex: 1.0;}

二、新語法

  1.容器的display屬性

.item{
    -moz-box-flex: 1;     /*Firefox*/
    -webkit-box-flex: 1;  /*Safari,Opera,Chrome*/
    box-flex: 1;
}
    
.box{                              /*行內flex*/
     display: -webkit-inline-flex; /*webkit*/
     display:inline-flex;
}

2.容器樣式

.box{    flex-direction: row | row-reverse | column | column-reverse;    /*主軸方向：左到右（默認） | 右到左 | 上到下 | 下到上*/

    flex-wrap: nowrap | wrap | wrap-reverse;    /*換行：不換行（默認） | 換行 | 換行并第一行在下方*/

    flex-flow: <flex-direction> || <flex-wrap>;    /*主軸方向和換行簡寫*/

    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主軸對齊方式：左對齊（默認） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/

    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉軸對齊方式：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;    /*多主軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 上下平均分布*/}

3.子元素屬性

.item{    order: <integer>;    /*排序：數值越小，越排前，默認為0*/

    flex-grow: <number>; /* default 0 */
    /*放大：默認0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）*/

    flex-shrink: <number>; /* default 1 */
    /*縮小：默認1（如果空間不足則會縮小，值為0不縮小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默認為0，可以設置px值，也可以設置百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]    /*flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto，*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;    /*單獨對齊方式：自動（默認） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/}

兼容寫法：

1.盒子的兼容寫法 

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

2.子元素的兼容寫法：

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

如果你不把握好這個先后順序，總是調整不出來完整的兼容樣式。