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。