flex线罕，是flexible box的簡(jiǎn)稱，意為彈性布局窃判，在RN中是用來(lái)描述子組件在父組件中的對(duì)齊方式和相對(duì)位置钞楼，使其能夠適應(yīng)不同的屏幕，為界面布局帶來(lái)更大的靈活性袄琳。

flex布局由flex container 和flex item組成询件。flex container分為主軸（main axis）和交叉軸（across axis）。主軸默認(rèn)是豎直方向唆樊。

flex

flex為彈性容器的屬性宛琅，在css3中由flex-grow、flex-shrink逗旁、flex-basis三個(gè)屬性組合起來(lái)嘿辟，其中后面兩個(gè)是可選參數(shù)。在RN中flex默認(rèn)為flexGrow屬性痢艺。

• flexGrow 元素主軸尺寸占當(dāng)前容器主軸尺寸的比重仓洼，默認(rèn)值為0。

flexDirection

flexDirection屬性為主軸方向堤舒，取值為column色建、column-reverse、row舌缤、row-reverse箕戳。默認(rèn)值為column。

• column 豎直方向国撵，起點(diǎn)在頂部陵吸，子組件從上到下排列。
• column-reverse 豎直方向介牙，起點(diǎn)在底部壮虫，子組件從下到上排列。
• row 水平方向环础，起點(diǎn)在左側(cè)囚似，子組件從左到右排列。
• row-reverse 水平方向线得，起點(diǎn)在右側(cè)饶唤，子組件從右到左排列。

flexWrap

flexWrap表示沿主軸方向放不下是否需要換行贯钩。取值為：wrap募狂、nowrap办素，默認(rèn)值為wrap。

• wrap 主軸方向放不下要換行祸穷。
• nowrap 主軸方向放不下不換行性穿。

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

justifyContent

justifyContent表示容器中的子組件在主軸方向上的對(duì)齊方式，取值為flex-start粱哼、flex-end季二、center、space-between揭措、space-around胯舷，默認(rèn)值為flex-start。

• flex-start 在主軸方向上和主軸的起點(diǎn)對(duì)齊绊含。
• flex-end 在主軸方向上和主軸的終點(diǎn)對(duì)齊桑嘶。
• center 在主軸方向上居中對(duì)齊。
• space-between 在主軸方向上兩端對(duì)齊躬充，每個(gè)item的間隔相等逃顶，第一個(gè)item和主軸起點(diǎn)、最后一個(gè)item和主軸終點(diǎn)沒(méi)有間隔充甚。
• space-around 在主軸方向上分散對(duì)齊以政，每個(gè)item的兩邊都有相同的間隔。主軸起點(diǎn)和終點(diǎn)與鄰近的兩個(gè)item的間隔只有中間item之間的間隔的一半伴找。

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

alignItems

alignItems表示容器中子組件在交叉軸方向上的對(duì)齊方式盈蛮，取值為：flex-start、flex-end技矮、center抖誉、stretch、baseline衰倦，默認(rèn)值為flex-start袒炉。

• flex-start 在交叉軸方向上和交叉軸的起點(diǎn)對(duì)齊。
• flex-end 在交叉軸方向上和交叉軸的終點(diǎn)對(duì)齊樊零。
• center 在交叉軸方向上居中對(duì)齊我磁。
• stretch 如果子組件未設(shè)置交叉軸方向的大小或設(shè)為auto，將會(huì)在交叉軸方向占滿整個(gè)容器驻襟。
• baseline 與子組件第一行文字的基線對(duì)齊十性。

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

alignContent

alignContent定義了多根軸線時(shí)，交叉軸方向的對(duì)齊方式塑悼，如果只有一根軸，該屬性是沒(méi)有效果的楷掉。取值為：flex-start厢蒜、flex-end霞势、center、space-between斑鸦、space-around愕贡、stretch。默認(rèn)值為flex-start巷屿。

• flex-start 在交叉軸方向上和交叉軸的起點(diǎn)對(duì)齊固以。
• flex-end 在交叉軸方向上和交叉軸的終點(diǎn)對(duì)齊。
• center 在交叉軸方向上居中對(duì)齊嘱巾。
• space-between 與交叉軸兩端對(duì)齊憨琳，軸線之間的間距間隔相等，第一根軸線上的item與交叉軸起點(diǎn)旬昭、最后一根軸線上的item與交叉軸終點(diǎn)沒(méi)有間隔篙螟。
• space-around 與交叉軸兩端對(duì)齊，軸線之間的間距間隔相等问拘，第一根軸線上的item與交叉軸起點(diǎn)遍略、最后一根軸線上的item與交叉軸終點(diǎn)的間隔只有中間軸線上item間隔的一半。
• stretch 如果子組件未設(shè)置交叉軸方向的大小或設(shè)為auto骤坐，將會(huì)在交叉軸方向占滿整個(gè)容器绪杏。

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

alignSelf

alignSelf定義了子組件自身對(duì)齊方式，該屬性會(huì)覆蓋父組件的alignItems屬性纽绍。取值為：auto蕾久、flex-start、flex-end顶岸、center腔彰、stretch，默認(rèn)值為auto辖佣。

• auto 繼承了它的父組件的 alignItems屬性霹抛，如父組件沒(méi)有，則為stretch卷谈。
• flex-start 子組件在交叉軸方向與交叉軸起點(diǎn)對(duì)齊杯拐。
• flex-end 子組件在交叉軸方向與交叉軸終點(diǎn)對(duì)齊。
• center 子組件在交叉軸方向居中對(duì)齊世蔗。
• stretch 如果沒(méi)有在交叉軸方向沒(méi)有設(shè)置大小端逼，則會(huì)拉伸在交叉軸方向占滿整個(gè)容器。

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