對RN布局中flexbox規(guī)則做一個說明：
felxbox是由伸縮容器和伸縮項目組成，容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
flexbox中目前我掌握的幾個屬性包括：
felxDirection、alignItems、justfyContent、flexWrap、alignContent，基本上使用前三個就可以了。
flexDirection
flex方向，控制item的排列方向，有row（水平排列）、column(豎直排列)、row-reverse（水平從右開始排列）、column-reverse（豎直從下排列）
row的時候 水平為主軸，豎直為次軸，column時豎直為主軸，水平為次軸。
alignItems
控制item在次軸上的排列方式，主要屬性包括：（以row為例）
flex-start 次軸起點開始（在垂直方向居top顯示）
flex-end次軸終點開始（在垂直方向上居bottom顯示）
center次軸中間開始（在垂直方向上居中顯示）
stretch如果為設置次軸寬度（或高度），或者設置為auto，將占滿整個容器（沒有設置height，垂直方向全部填充）
baseline第一行文字的基線對齊
效果圖如下：
justfyContent
主軸方向的對齊方式（以row為例）
flex-start起始位置對齊（左對齊）
flex-end結束位置對齊（右對齊）
center中心對齊（水平居中）
space-between兩端對齊，item之間間距平分
space-around每個項目兩端的間隔相等
flexWrap
按照主軸排列，如果一行（列）排列不下時，控制第二行（列）的位置（如何換行／列）
nowrap：不換行，為默認效果
wrap：換行，依次往后排
wrap-reverse：換行，從后往前排
以row為例：
alignContent
多條次軸線的對齊方式（如果只有一個，該屬性不起作用，即不換行／列，該屬性無用）
其屬性值
flex-start起始位置對齊（多條次軸線左對齊）
flex-end結束位置對齊（多條次軸線右對齊）
center與交叉軸兩端對齊，軸線之間的間距間隔平均分布
space-between每根軸線兩側的間隔相等
space-around軸線占滿整個交叉軸，默認值
flexFlow
有的博客上寫了這個屬性，經(jīng)我測試暫沒發(fā)現(xiàn)有這個屬性，應該是CSSStyle里面的屬性
flex
指定數(shù)字，按照比例根據(jù)父容器大小來動態(tài)計算大小，其中父容器必須有固定的width 和height，或者設定flex，要不父容器尺寸為0，子組件設置flex也沒有效果（這是廢話）
數(shù)值越大，顯示空間越大
alignSelf
決定元素在父元素次軸方向的排列順序（設置在子元素上），會覆蓋父容器alignItems屬性，默認值為auto
alignSelfe num('auto', 'flex-start', 'flex-end', 'center', 'stretch')
ps：以上內(nèi)容我親自測試過。
其他細節(jié)參考如下：
