http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=4&sn=1e54c10974c4efacd78d7fc3d0da60bd&mpshare=1&scene=1&srcid=10200TIN6NG8ktULzkc0rQuP#rd
### Flexbox的常用屬性
#### 容器屬性
> flexDirection: `row | row-reverse | column | column-reverse`
> 該屬性決定主軸的方向(即項目的排列方向)。
> row:主軸為水平方向,起點在左端。
> row-reverse:主軸為水平方向,起點在右端。
> column(默認值):主軸為垂直方向,起點在上沿。
> column-reverse:主軸為垂直方向,起點在下沿。

> justifyContent:`flex-start | flex-end | center | space-between | space-around`
> 定義了伸縮項目在主軸線的對齊方式
> flex-start(默認值):伸縮項目向一行的起始位置靠齊。
> flex-end:伸縮項目向一行的結束位置靠齊。
> center:伸縮項目向一行的中間位置靠齊。
> space-between:兩端對齊,項目之間的間隔都相等。
> space-around:伸縮項目會平均地分布在行里,兩端保留一半的空間。

> alignItems: `flex-start | flex-end | center | baseline | stretch`
> 定義項目在交叉軸上如何對齊,可以把其想像成側軸(垂直于主軸)的“對齊方式”。
> flex-start:交叉軸的起點對齊。
> flex-end:交叉軸的終點對齊 。
> center:交叉軸的中點對齊。
> baseline:項目的第一行文字的基線對齊。
> stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。

> flexWrap: `nowrap | wrap | wrap-reverse`
> 默認情況下,項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。

#### 元素屬性
#### flex
> “flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫, 其中第二個和第三個參數(flex-shrink、flex-basis)是可選參數。
> 默認值為“0 1 auto”。
> 寬度 = 彈性寬度 * ( flexGrow / sum( flexGorw ) )

#### alignSelf
> alignSelf: “auto | flex-start | flex-end | center | baseline | stretch”
> align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。