[TOC]
- ##Flex布局
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。
```
.container{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
```
- ##基本概念
>采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做`main start`，結束位置叫做`main end`；交叉軸的開始位置叫做`cross start`，結束位置叫做`cross end`。
項目默認沿主軸排列。單個項目占據的主軸空間叫做`main size`，占據的交叉軸空間叫做`cross size`。
- ##容器屬性
- ####flex-direction
`flex-direction`屬性決定主軸的方向（即項目的排列方向）。
`flex-direction`有四個值`row(默認值)`,`row- reverse`,`column`,`column-reverse`。
>- row（默認值）：主軸為水平方向，起點在左端。
>- row-reverse：主軸為水平方向，起點在右端。
>column：主軸為垂直方向，起點在上沿。
>column-reverse：主軸為垂直方向，起點在下沿。
- ####flex-wrap
>默認情況下，項目都排在一條線（又稱"軸線"）上。`flex-wrap`
屬性定義，如果一條軸線排不下，如何換行。
`flex-wrap`的值有3個：`nowrap(默認值)`,`wrap`,`wrap-reverse`。
- `nowrap`不換行
- `wrap`換行，且第一行在上面
- `wrap-reverse`換行，且第一行在下面
- ####flex-flow
>` flex-flow`屬性是`flex-direction`屬性和`flex-wrap`屬性的簡寫形式，默認值為`row nowrap`。
- ####justify-content
>`justify-content`屬性定義了項目在主軸上的對齊方式。
`justify-content`的值有5個：`flex-start(默認值)`,`flex-end`,`center`,`space-between`,`space-around`。
- `flex-start` 左對齊（默認）
- `flex-end` 右對齊
- `center` 居中對齊
- `space-between` 兩端對齊，并且項目間距一致
- `space-around` 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
- ####align-items
>`align-items`屬性定義項目在交叉軸上如何對齊。
`align-items`的值有5個：`flex-start`,`flex-end`,`center`,`stretch(默認值)`,`baseline`。
- `flex-start`：交叉軸的起點對齊。
- `flex-end`：交叉軸的鐘點對齊。
- `center`：交叉軸的中點對齊。
- `stretch`：如果項目未設置高度或設為auto，將占滿整個容器的高度，為默認值。
- `baseline`：項目的**第一行**文字的基線對齊。
- ####align-content
>align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
`align-content`的值有5個：`flex-start`,`flex-end`,`center`,`stretch(默認值)`,`space-between`,`space-around`。
- `flex-start`：與交叉軸的起點對齊。
- `flex-end`：與交叉軸的終點對齊。
- `center`：與交叉軸的中點對齊。
- `stretch`：軸線占滿整個交叉軸。
- `space-between`：與交叉軸兩端對齊，軸線之間的間隔平均分布。
- `space-around`：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
