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