flex-direction：
display：flex；
可以填入兩個值： inline-flex、flex（flex用到的比較多）
給父級設置display：flex；這個父級就變成了一個具備彈性功能的盒子區域，在這個區域里面我們就可以使用它的功能，父子級相互配合使用。
flex-direction：
flex還有兩條軸，一個是主軸（X軸）還有交叉軸（Y軸）
可以填入4個值：row | row-reverse | column | column-reverse
row：默認方向，即主軸由左往右
row-reverse：對齊方式與row相反。
column：即縱向主軸從上往下排列（頂對齊）。
column-reverse：對齊方式與column相反。
flex-wrap
可填入3個值：nowrap | wrap | wrap-reverse
nowrap是默認值
wrap：flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse：反轉 wrap 排列。
基於主軸justify-content:
可填入5個值：flex-start | flex-end | center | space-between | space-around
flex-start是默認值
flex-end：彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有后續的伸縮盒項目與其前一個項目對齊。
center：彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結束位置的邊距（如果剩余空間是負數，則保持兩端相等長度的溢出）。
space-between：彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。
space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它情況下，伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
基於交叉軸align-items
可填入5個值：flex-start | flex-end | center | baseline | stretch
stretch為默認值
flex-end： 居於左下角對齊
center：居中對齊
baseline：居於元素內容對齊
stretch：子元素在不設置高度的情況下，幫你撐開子元素至父級高度，僅在子元素不設高度的情況下生效（因為權重過低）
利用主軸和交叉軸的居中可以實現垂直居中
多行情況下有效基於交叉軸align-content：
可以填入5個值：flex-start | flex-end | center | space-between | space-around | stretch
stretch為默認值
flex-end：基於交叉軸居於尾部
center：基於交叉軸居中
space-between：基於交叉軸居於上下
space-around ：看效果
stretch：子元素不設置高度，會幫你添加高度至父級高度
