花點時間弄懂flex佈局.

一.Flex佈局是什麼

Flex是Flexible Box的縮寫，意爲彈性佈局。任何容器均可以指定爲Flex佈局.
備註如下：在文中，自我理解：主軸爲X軸，交叉軸爲Y軸

.box{
  display:flex
}

之因此有這個佈局出現，是由於佈局的傳統方案：基於盒狀模型，依賴display屬性，position屬性，float屬性對於那些特殊佈局很是不方便.

行內元素若想使用Flex

.box{ 
  display:inline-flex 
}

如果webkit內核的瀏覽器，例如safari，必須加上-webkit前綴.
若是設置了flex，則float,clear,vergical-align三個屬性將失去做用.

二.Flex的一些名詞概念

採用Flex佈局的元素，被稱爲Flex容器（Flex container）,
它的全部子元素自動成爲容器成員，被稱爲Flex項目（Flex item）

容器默認存在兩根軸：水平的主軸（main axis）和 垂直的交叉軸（cross axis）.

主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。

項目默認沿主軸排列。單個項目(Flex item)佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

三.容器的屬性

3.1 flex-direction屬性
flex-direction屬性決定主軸（在我自已的理解中，主軸即X軸）的方向（即項目的排列方向）

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

屬性解釋：
row(默認值):主軸爲水平方向，起點在左端
row-reverse:主軸爲水平方向，起點在右端
column:主軸爲垂直方向，起點在上沿
column:主軸爲垂直方向，起點在下沿

3.2 flex-wrap屬性
默認狀況下，項目(flex-item)都排在一條線上，flex-wrap屬性定義，若是一條軸線排不下，如何換行.

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

屬性解釋：
總共有12個塊
1.nowrap(默認值)：不換行

2.wrap:換行，且第一行在上方

3.wrap-reverse:換行，第一行在下方

3.3 flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row 與 nowrap

3.4 justify-content屬性
justify-content定義了項目在主軸上的對齊方式

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

屬性解釋：
1.flex-start:左對齊

2.flex-end:右對齊

3.center:居中

4.space-between:兩端對齊，項目之間間隔相等

5.space-around:每一個項目兩側的間隔相等，因此，項目之間的間隔比項目與邊的間隔大一倍

3.5 align-items屬性
align-items屬性定義項目在交叉軸上如何對齊

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

屬性解釋：
1.flex-start:Y軸的起點對齊

2.flex-end:Y軸的終點對齊

3.center:Y軸的中點對齊

4.baseline:項目第一行文字的基線對齊

5.stretch(默認值)：若是項目未設置高度或設爲auto，則佔滿整個容器的高度

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

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

屬性解釋：
1.flex-start:與Y軸的起點對齊

2.flex-end:與Y軸的終點對齊

3.center:與Y軸的中點對齊

4.space-between:與Y軸兩端對齊，軸線之間的間隔平均分佈

5.space-around:每根軸線兩側的間隔都相等，因此軸線之間的間隔比軸線與邊的間隔大一倍

6.stretch(默認值):軸線佔滿整個Y軸

四.項目(Flex-item)的屬性

4.1 order屬性
order屬性定義項目(Flex-item)的排序順序，數值越小，排列越靠前，默認爲0.

.item{
  order:<int>
}

4.2 flex-grow屬性
flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大

.item{
  flex-grow:<number>;默認爲0
}

若三個模塊flex-grow都爲1，則顯示以下：

若三個模塊flex-grow值以下，則顯示：

.item-one{
 flex-grow:1
}
.item-two{
 flex-grow:2
}
.item-three{
 flex-grow:1
}

4.3 flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認爲1，若是空間不足，則該項目縮小，若爲0，則不縮小.負值對該屬性無效。

.item{
  flex-shrink:<number>;默認爲1
}

4.4 flex-basis屬性
flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間,不會變大變小。

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

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

以上內容參考此連接，歡迎查看原版.