css3 FlexBox 彈性佈局

    Flex 彈性佈局

這個是css3中新添加的內容，如今已經支持全部的瀏覽器，利用Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。

注意：在設置 flex 後，子元素的flaot ，clear,  vertical－align 都失效。

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

　　　flex 裏面的元素咱們把它們稱爲 項目 

目前支持：

1.Chrome 21+

2.Opera 12.1+

3.Firefox 22+

4.Safari 6.1+

5.IE 10+

 

在彈性佈局中 有兩個重要的 術語叫 main axis  和 cross axis

main axis 是指項目中的 水平主軸   水平主軸開始位置叫 （main start ） 結束點叫 （main end） 

cross axis 是指項目中的 垂直交叉軸  垂直交叉軸的起點叫（ cross start） 結束點叫（cross end ）

默認的排列是：沿水平主軸的左側爲起點

Flex 的6個屬性

1.flex-disrection

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items

6.align-content

1.Flex -disrection 屬性 決定主軸的方向（項目的排列方向）一共四個屬性

語法：flex-direction: column || column-reverse || row ||  row-reverse 

column－reverse ：主軸在垂直軸，起點爲下。

column : 主軸爲垂直軸，起點在上。

row ：主軸在水平軸，起點在左。（默認）

row－reverse ：主軸爲水平軸，起點在右。

 

 

2.justify － content 屬性  項目在主軸的對齊方式 一共有5個屬性 

語法：justify-content: center|| flex-end || flex-start  || space-around || space-between ;

1.justify-content:flex-start;   左對齊  系統默認的對齊方式

2.justify-content: center;      內容居中  （若是剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）

3.justify-content: flex-end;   右對齊 

4.justify-content: space-around; 

彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。若是剩餘空間爲負或者只有一個彈性項，則該值等同於center。不然，彈性項目沿該行分佈，且彼此間隔相等（好比是10px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*10px=5px）。

5.justify-content: space-between; ( 通俗點就是子元素之間的間隙是同樣的）

彈性項目平均分佈在該行上。若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。不然，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，而後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。

下面的圖片解釋5個屬性之間的區別

 

 

3.Flex-wrap  如何換行 3個屬性

 語法：flex－wrap：nowrap || wrap || wrap-reverse .

 flex-wrap : nowrap ; 不換行 （默認）

 

 

 flex-wrap :wrap ;   換行  第一行在上面

 

 

 flex-wrap :wrap -reverse ; 換行，第一行在下面

 

 

 4.Flex-flow 屬性 是指 flex-direction 屬性和 flex-wrap 屬性的簡寫形式  默認屬性  flex－flow ：row  nowrap ；

 5.align-items 屬性 項目在垂直軸的對齊方式  一共5個屬性

語法 ：align-items:flex-start || flex-end || centen || stretch || baseline ;

1.  align-items:flex-stert;   垂直軸的起點對齊 

2.  align-items:flex-end;    垂直軸的終點對齊

3.  align-items: center ;     垂直軸的中點對齊

4.  align-items: stretch ; (默認值）   項目未設置高度或者高度爲 auto時, 項目將沾滿 整個容器的高度 

5.  align-items: baseline;   在項目中，以第一行文字的基線對齊

 

 

6.   align-content 屬性 多根軸線的對齊方式，若是隻有一條軸線，則不起做用

 語法：align－content：flex-start || flex-end || center || stretch || space-between || space-around ;

 1.   align-content: flex-stert;  與垂直軸的起點對齊 

 2.   align-content: flex-end ;  與垂直軸的終點對齊

 3.   align-content : center ;    與垂直軸的中點對齊

 4.   align-content : stretch ; (默認值） 軸線佔滿整個垂直軸

 5.   align-content : space-between;  與垂直軸兩端對齊，軸線之間的間隔平均分佈

 6.   align-content: space-around;  每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

 

 

二. Flex 中項目的屬性

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

 

 

2. flex-grow 屬性 （默認值：0）定義項目的放大比列 ，即若是存在剩餘空間，也不放大。

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

 

 

3. flex－shrink 屬性 （默認值：1）負值無效   定義項目的縮小比列 即若是空間不足，該項目將縮小。

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

 

 

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

5. flex 屬性     flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲（0  1 auto），後兩個屬性可選。

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

語法 ：  align-self: auto || flex-start || flex-end || center || baseline || stretch;