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 主軸方向放不下不換行。
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之間的間隔的一半。
alignItems
alignItems表示容器中子元件在交叉軸方向上的對齊方式，取值為：flex-start、flex-end、center、stretch、baseline，預設值為flex-start。
- flex-start 在交叉軸方向上和交叉軸的起點對齊。
- flex-end 在交叉軸方向上和交叉軸的終點對齊。
- center 在交叉軸方向上居中對齊。
- stretch 如果子元件未設定交叉軸方向的大小或設為auto，將會在交叉軸方向佔滿整個容器。
- baseline 與子元件第一行文字的基線對齊。
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，將會在交叉軸方向佔滿整個容器。
alignSelf
alignSelf定義了子元件自身對齊方式，該屬性會覆蓋父元件的alignItems屬性。取值為：auto、flex-start、flex-end、center、stretch，預設值為auto。
- auto 繼承了它的父元件的 alignItems屬性，如父元件沒有，則為
stretch。 - flex-start 子元件在交叉軸方向與交叉軸起點對齊。
- flex-end 子元件在交叉軸方向與交叉軸終點對齊。
- center 子元件在交叉軸方向居中對齊。
- stretch 如果沒有在交叉軸方向沒有設定大小，則會拉伸在交叉軸方向佔滿整個容器。