Flex(Flexible Box)佈局意爲”彈性佈局”,是CSS3最受歡迎的屬性之一，簡潔、快速，爲盒狀模型提供了最大的靈活性。
但是在使用該屬性過程中，我們需要注意兩點：
- Flex屬性在webkit內核的瀏覽器中使用時，必須加上-webkit-前綴。
- 設爲Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。
容器的屬性
Flex具有以下六種容器屬性。
| 屬性 | 說明 |
|---|---|
| flex-direction | 決定item的排列方向 |
| flex-wrap | 一行排列不下時，item的換行方式 |
| flex-flow | flex-direction和flex-wrap的結合，默認爲row nowrap |
| justify-content | item在主軸上的對齊方式 |
| align-items | 定義項目在交叉軸上如何對齊 |
| align-content | 對根軸線的對齊方式，如果項目只有一根軸線，該屬性不起作用 |
flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）。
flex-direction: row | row-reverse | column | column-reverse;
它有四種取值：
| flex-direction | 說明 |
|---|---|
| row | 主軸爲水平方向，起點在左端（默認） |
| row-reverse | 主軸爲水平方向，起點在右端 |
| column | 主軸爲垂直方向，起點在上沿 |
| column-reverse | 主軸爲垂直方向，起點在下沿 |
flex-direction屬性
一行排列不下時，item的換行方式。
flex-wrap: nowrap | wrap | wrap-reverse;
它有三種取值：
| flex-wrap | 說明 |
|---|---|
| nowrap | 一行排列，不換行（默認） |
| wrap | 換行，第一行在上方 |
| wrap-reverse | 換行，第一行在下方 |
nowrap
wrap
wrap-reverse
flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
使用結合flex-direction屬性和flex-wrap屬性，如：row wrap|column wrap-reverse等。
flex-flow: row nowrap;
justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
有五種取值：
| justify-content | 說明 |
|---|---|
| flex-start | 左對齊 |
| flex-end | 右對齊 |
| center | 居中 |
| space-between | 兩端對齊，項目之間的間隔都相等 |
| space-around | 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍 |
align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
有五種取值：
| align-items | 說明 |
|---|---|
| flex-start | 交叉軸的起點對齊 |
| flex-end | 交叉軸的終點對齊 |
| center | 交叉軸的中點對齊 |
| space-between | 項目的第一行文字的基線對齊 |
| space-around | 如果項目未設置高度或設爲auto，將佔滿整個容器的高度（默認值） |
align-items屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
有六種取值：
| align-content | 說明 |
|---|---|
| flex-start | 交叉軸的起點對齊 |
| flex-end | 交叉軸的終點對齊 |
| center | 交叉軸的中點對齊 |
| space-between | 與交叉軸兩端對齊，軸線之間的間隔平均分佈 |
| space-around | 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍 |
| stretch | 軸線佔滿整個交叉軸（默認值） |
項目的屬性
Flex具有以下六種項目屬性。
| 屬性 | 說明 |
|---|---|
| order | order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。 |
| flex-wrap | 定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。 |
| flex-shrink | 項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。 |
| flex-basis | i項目佔據的主軸空間 |
| flex | flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。 |
| align-self | 可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch |
order: <number>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] //該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self: auto | flex-start | flex-end | center | baseline | stretch;
待續。。。