flex佈局

Flex是Flexible Box的縮寫，意爲彈性佈局，用來爲盒狀模型提供最大的靈活性。在處理垂直方向的對齊比較方便，如今愈來愈多的瀏覽器已經支持flex佈局，最近出的輕應用也都是flex佈局，對於前端來講，學習flex佈局仍是很是必要的。

注意，設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。
容器默認存在兩根軸，水平的主軸（main axis）,和垂直的交叉軸（cross axis）,主軸的開始位置
叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start,結束位置叫作cross end
項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size

任何一個容器均可以指定爲Flex佈局

.box{
   display:flex;
}

行內元素也可使用Flex佈局 

.box{
   display:inline-flex;
}

Webkit內核的瀏覽器，必須加上-webkit前綴 

.box{
   display:-webkit-flex;
   display:flex;
}

一、容器的屬性，如下6個屬性設置在容器上

（1）flex-direction
（2）flex-wrap
（3）flex-flow
（4）justify-content
（5）align-items
（6）align-content 

1-1：flex-direction屬性決定主軸的方向，含有下面4個值

       row（默認值）:主軸爲水平方向，起點在左端
       row-reverse:主軸爲水平方向，起點在右端
       column:主軸爲垂直方向，起點在上沿
       column-reverse:主軸爲垂直方向，起點在下沿

.box { flex-direction : row | row-reverse | column | column-reverse }

1-2： flex-wrap：默認狀況下，項目都排在一條線上。若是一條軸線排不下，如何換行

（1）nowrap(默認)：不換行
（2）wrap:換行，第一行在上方
（3）wrap-reverse:換行，第一行在下方

.box {
       flex-wrap : nowrap | wrap | wrap-reverse;
}

1-3： flex-flow屬性是flex-direction屬性與flex-wrap屬性的簡寫形式。

1-4： justify-content屬性定義了項目在主軸上的對其方式（即水平方向的對齊方式）

（1）flex-start:左對齊
（2）flex-end:右對齊
（3）center:水平居中
（4）space-between:兩端對齊，項目之間的間隔相等（靠邊）
（5）space-around:每一個項目兩側的間隔相等，項目之間的間隔比項目與邊框的間隔大一倍

.box{
      justify-content : flex-start  |  flex-end  |  center  |  space-between  |  space-around
}

1-5： align-items屬性定義項目在縱軸（交叉軸）上如何對齊（即垂直方向）

（1）flex-start:交叉軸的起點對齊
（2）flex-end:交叉軸的終點對齊
（3）center：交叉軸的中點對齊
（4）baseline:項目的第一行文字的基線對齊
（5）stretch(默認值):若是項目未設置高度或設爲auto，將佔滿整個容器的高度

.box {
        align-items : flex-start | flex-end | center | baseline | stretch

}

1-6： align-content屬性定義了多根軸線的對齊方式，若是項目只有一根軸線 ，改屬性不起做用

          (在換行後垂直對齊，換行表明有多個主軸)，

.box {
      align-content : flex-start | flex-end | center | space-between | space-around | stretch
}

二、項目的屬性，如下6個屬性設置在項目上

（1）order
（2）flex-grow
（3）flex-shrink
（4）flex-basis
（5）flex
（6）align-self

order 屬性：定義項目的排列順序。數值越小，排列越靠前，默認爲0

flex-grow 屬性：定義項目的放大比例，默認爲0，若是存在剩餘空間，也不放大，若是全部項目的flex-grow屬性都爲1，則他們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍

flex-shrink屬性：定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小，負值對該屬性無效

flex-basis屬性：定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto,即項目的原本大小，它能夠設爲跟width或height屬性同樣的值（好比350px）,則項目將佔據固定空間

flex屬性：是flex-grow，flex-shrink 和flex-basis的簡寫，默認值爲0 1 auto
建議優先使用這個屬性，而不是單獨寫3個分離的屬性

align-self屬性：容許單個項目能夠與其餘項目不同的對齊方式，可覆蓋box的align-items屬性。默認爲auto,表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch

因爲flex有新版與舊版，爲了兼容各類瀏覽器，下面是兼容寫法

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

 }

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

 在底版本安卓系統中，由於全部都是向下兼容的，因此寫法的順序必定要寫好了才起做用。就是把舊語法寫在底下，個別不兼容的移動設置纔會識別，那些帶box的必定要寫在最下面便可。