React Native——flex（彈性佈局）

flex，是flexible box的簡稱，意爲彈性佈局，在RN中是用來描述子組件在父組件中的對齊方式和相對位置，使其可以適應不一樣的屏幕，爲界面佈局帶來更大的靈活性。

flex佈局由flex container 和flex item組成。flex container分爲主軸（main axis）和交叉軸（across axis）。主軸默認是豎直方向。

flex

flex爲彈性容器的屬性，在css3中由flex-grow、flex-shrink、flex-basis三個屬性組合起來，其中後面兩個是可選參數。在RN中flex默認爲flexGrow屬性。

• flexGrow 元素主軸尺寸佔當前容器主軸尺寸的比重，默認值爲0。

flexDirection

flexDirection屬性爲主軸方向，取值爲column、column-reverse、row、row-reverse。默認值爲column。

• column 豎直方向，起點在頂部，子組件從上到下排列。
• column-reverse 豎直方向，起點在底部，子組件從下到上排列。
• row 水平方向，起點在左側，子組件從左到右排列。
• row-reverse 水平方向，起點在右側，子組件從右到左排列。

flexWrap

flexWrap表示沿主軸方向放不下是否須要換行。取值爲：wrap、nowrap，默認值爲wrap。

• wrap 主軸方向放不下要換行。
• nowrap 主軸方向放不下不換行。

flexWrap屬性值對比圖（其中`flexDirection: 'row'`）

justifyContent

justifyContent表示容器中的子組件在主軸方向上的對齊方式，取值爲flex-start、flex-end、center、space-between、space-around，默認值爲flex-start。

• flex-start 在主軸方向上和主軸的起點對齊。
• flex-end 在主軸方向上和主軸的終點對齊。
• center 在主軸方向上居中對齊。
• space-between 在主軸方向上兩端對齊，每一個item的間隔相等，第一個item和主軸起點、最後一個item和主軸終點沒有間隔。
• space-around 在主軸方向上分散對齊，每一個item的兩邊都有相同的間隔。主軸起點和終點與鄰近的兩個item的間隔只有中間item之間的間隔的一半。

justifyContent屬性值對比圖（其中`flexDirection: 'row'`）

alignItems

alignItems表示容器中子組件在交叉軸方向上的對齊方式，取值爲：flex-start、flex-end、center、stretch、baseline，默認值爲flex-start。

• flex-start 在交叉軸方向上和交叉軸的起點對齊。
• flex-end 在交叉軸方向上和交叉軸的終點對齊。
• center 在交叉軸方向上居中對齊。
• stretch 若是子組件未設置交叉軸方向的大小或設爲auto，將會在交叉軸方向佔滿整個容器。
• baseline 與子組件第一行文字的基線對齊。

alignItems屬性值對比圖（其中`flexDirection: 'row'`）

alignContent

alignContent定義了多根軸線時，交叉軸方向的對齊方式，若是隻有一根軸，該屬性是沒有效果的。取值爲：flex-start、flex-end、center、space-between、space-around、stretch。默認值爲flex-start。

• flex-start 在交叉軸方向上和交叉軸的起點對齊。
• flex-end 在交叉軸方向上和交叉軸的終點對齊。
• center 在交叉軸方向上居中對齊。
• space-between 與交叉軸兩端對齊，軸線之間的間距間隔相等，第一根軸線上的item與交叉軸起點、最後一根軸線上的item與交叉軸終點沒有間隔。
• space-around 與交叉軸兩端對齊，軸線之間的間距間隔相等，第一根軸線上的item與交叉軸起點、最後一根軸線上的item與交叉軸終點的間隔只有中間軸線上item間隔的一半。
• stretch 若是子組件未設置交叉軸方向的大小或設爲auto，將會在交叉軸方向佔滿整個容器。

alignContent屬性值對比圖（其中`flexDirection: 'row'`）

alignSelf

alignSelf定義了子組件自身對齊方式，該屬性會覆蓋父組件的alignItems屬性。取值爲：auto、flex-start、flex-end、center、stretch，默認值爲auto。

• auto 繼承了它的父組件的 alignItems屬性，如父組件沒有，則爲stretch。
• flex-start 子組件在交叉軸方向與交叉軸起點對齊。
• flex-end 子組件在交叉軸方向與交叉軸終點對齊。
• center 子組件在交叉軸方向居中對齊。
• stretch 若是沒有在交叉軸方向沒有設置大小，則會拉伸在交叉軸方向佔滿整個容器。

alignSelf屬性值對比圖（其中父組件`flexDirection: 'row'`）