本文主要講解與flex布局相關(guān)的屬性狮腿，包括flex熊经，flexDirection，alignItems猖毫，justifyContent台谍，flexWrap等。React Native其他所有屬性均在LayoutPropTypes.js中定義吁断，在編輯器中搜索LayoutPropTypes.js即可看到趁蕊。文末附所有測(cè)試代碼。
首先定義幾個(gè)樣式仔役，這樣在視圖中能更好的看到測(cè)試效果：
conststyles = StyleSheet.create({// 父容器樣式container: {? ? ? ? borderWidth:1,? ? ? ? padding:5,? ? ? ? margin:5,? ? },// 文字標(biāo)簽樣式label: {? ? ? ? color:'#333333',? ? ? ? margin:5,? ? },});
flexDirection
子元素在父容器中的排列方向:
flexDirection:'row',? 水平排列
flexDirection:'column',? 垂直排列
子元素排列方向舉例
1.默認(rèn)情況下父容器flexDirection:'column'掷伙，子元素從上到下垂直排列：
默認(rèn)情況下父容器flexDirection:'column'，子元素從上到下垂直排列測(cè)試測(cè)試
視圖：
默認(rèn)不設(shè)置flexDirection
2.父容器flexDirection:'column'骂因，子元素從左到右水平排列：
父容器flexDirection:'column'炎咖，子元素從左到右水平排列測(cè)試測(cè)試測(cè)試
視圖：
父容器設(shè)置flexDirection:'column'
3.父容器flexDirection:'column'，子元素從上到下垂直排列，與默認(rèn)情況父容器不設(shè)置flexDirection相同：
父容器flexDirection:'column'乘盼，子元素從上到下垂直排列升熊，與默認(rèn)情況父容器不設(shè)置flexDirection相同測(cè)試測(cè)試測(cè)試
視圖：
父容器flexDirection:'column'
flex
類似于Android中權(quán)重layout_weight的概念,需要配合flexDirection使用才有效果。
舉例
1.父容器默認(rèn)情況下(flexDirection:'column')子元素從上到下垂直排列绸栅，此時(shí)子元素默認(rèn)水平方向填充父容器;子元素flex:1,在垂直方向起作用级野，表示垂直方向占滿父容器空間：
視圖：
父容器flexDirection默認(rèn),子元素flex:1
2.父容器flexDirection:'row'時(shí)子元素從左到右水平排列;flex:1在水平方向起作用，表示水平方向占滿全部父容器空間:
父容器flexDirection:'row'時(shí)子元素從左到右水平排列;flex:1在水平方向起作用粹胯，表示水平方向占滿全部父容器空間
視圖：
父容器flexDirection:'row'子元素flex:1
3.父容器flexDirection:'column'蓖柔，只有一個(gè)子元素;子元素flex:1,占滿全部父容器空間，子元素height不起作用:
父容器flexDirection:'column'风纠，只有一個(gè)子元素;子元素flex:1,占滿全部父容器空間况鸣，子元素height不起作用
視圖：
子元素占滿父容器
4.父容器flexDirection:'row'，只有一個(gè)子元素;子元素flex:1,占滿全部父容器空間,子元素width不起作用:
父容器flexDirection:'row'竹观，只有一個(gè)子元素;子元素flex:1,占滿全部父容器空間,子元素width不起作用
視圖：
子元素占滿父容器
5.父容器flexDirection:'row'镐捧，子元素在水平方向按比例分配父容器空間:
父容器flexDirection:'row'，子元素在水平方向按比例分配父容器空間
視圖：
子元素1:2分配
6.父容器flexDirection:'column'臭增，子元素在垂直方向按比例分配父容器空間:
父容器flexDirection:'column'懂酱，子元素在垂直方向按比例分配父容器空間
視圖：
子元素1:1分配
justifyContent
表示在水平方向或垂直方向子元素的對(duì)齊方式，需要配合flexDirection使用誊抛。
當(dāng)父容器flexDirection:'row'時(shí)
justifyContent:'flex-start'列牺，表示子元素水平方向左對(duì)齊
justifyContent:'center'，表示子元素水平居中對(duì)齊
justifyContent:'flex-end'拗窃，表示子元素水平方向右對(duì)齊
justifyContent:'space-between'瞎领，表示子元素水平方向元素之間間隔相同
justifyContent:'space-around'，表示子元素水平方向元素兩邊間隔相同
當(dāng)父容器flexDirection:'column'時(shí)
justifyContent:'flex-start'随夸，表示子元素垂直方向上對(duì)齊
justifyContent:'center'默刚，表示子元素垂直居下對(duì)齊
justifyContent:'flex-end'，表示子元素垂直方向居中對(duì)齊
justifyContent:'space-between'逃魄，表示垂直方向子元素之間間隔相同
justifyContent:'space-around'，表示垂直方向子元素兩邊間隔相同
水平方向即flexDirection:'row'時(shí)舉例
1.水平方向左對(duì)齊澜搅，justifyContent:'flex-start':
水平方向左對(duì)齊伍俘，justifyContent:'flex-start'測(cè)試測(cè)試測(cè)試
視圖：
水平方向左對(duì)齊
2.水平方向居中對(duì)齊，justifyContent:'center'：
水平方向居中對(duì)齊勉躺，justifyContent:'center'測(cè)試測(cè)試測(cè)試
視圖：
水平方向居中對(duì)齊
3.水平方向右對(duì)齊癌瘾，justifyContent:'flex-end'：
水平方向右對(duì)齊，justifyContent:'flex-end'測(cè)試測(cè)試測(cè)試
視圖：
水平方向右對(duì)齊
4.水平方向元素之間間隔相同饵溅，justifyContent:'space-between'：
水平方向元素之間間隔相同妨退，justifyContent:'space-between'測(cè)試測(cè)試測(cè)試
視圖：
水平方向元素之間間隔相等
5.水平方向元素兩邊間隔相同，justifyContent:'space-around'：
水平方向元素兩邊間隔相同，justifyContent:'space-around'測(cè)試測(cè)試測(cè)試
視圖：
水平方向元素兩邊間隔相等
垂直方向即flexDirection:'column'時(shí)舉例
1.垂直方向上對(duì)齊咬荷，justifyContent:'flex-start'
垂直方向上對(duì)齊冠句，justifyContent:'flex-start'測(cè)試測(cè)試
視圖：
垂直方向上對(duì)齊
2.垂直方向居中對(duì)齊，justifyContent:'center'
垂直方向居中對(duì)齊幸乒，justifyContent:'center'測(cè)試測(cè)試
視圖：
垂直方向居中對(duì)齊
3.垂直方向下對(duì)齊懦底，justifyContent:'flex-end'
垂直方向下對(duì)齊，justifyContent:'flex-end'測(cè)試測(cè)試
視圖：
垂直方向下對(duì)齊
4.垂直方向元素之間間隔相同罕扎，justifyContent:'space-between'
垂直方向元素之間間隔相同聚唐，justifyContent:'space-between'測(cè)試測(cè)試
視圖：
垂直方向元素之間間隔相同
5.垂直方向元素兩邊間隔相同，justifyContent:'space-around'
垂直方向元素兩邊間隔相同腔召，justifyContent:'space-around'測(cè)試測(cè)試
視圖：
垂直方向元素兩邊間隔相同
alignItems
表示在水平方向或垂直方向子元素的對(duì)齊方式杆查，需要配合flexDirection使用。與之相似的還有alignSelf臀蛛，alignSelf表示自己相對(duì)于父容器的對(duì)齊方式亲桦，用法與alignItems相同。這里要注意掺栅，alignItems與justifyContent在flexDirection上的對(duì)齊方向相反烙肺。
當(dāng)父容器flexDirection:'column'時(shí)
alignItems:'flex-start'，表示子元素水平方向左對(duì)齊
alignItems:'center'氧卧，表示子元素水平居中對(duì)齊
alignItems:'flex-end'桃笙，表示子元素水平方向右對(duì)齊
當(dāng)父容器flexDirection:'row'時(shí)
alignItems:'flex-start'，表示子元素垂直方向上對(duì)齊
alignItems:'center'沙绝，表示子元素垂直居下對(duì)齊
alignItems:'flex-end'搏明，表示子元素垂直方向居中對(duì)齊
水平方向即flexDirection:'column'時(shí)舉例
1.水平方向左對(duì)齊，alignItems:'flex-start'
水平方向左對(duì)齊闪檬，alignItems:'flex-start'測(cè)試測(cè)試測(cè)試
視圖：
水平方向左對(duì)齊
2.水平方向居中對(duì)齊星著，alignItems:'center'
水平方向居中對(duì)齊，alignItems:'center'測(cè)試測(cè)試測(cè)試
視圖：
水平方向居中對(duì)齊
3.水平方向右對(duì)齊粗悯，alignItems:'flex-end'
水平方向右對(duì)齊虚循，alignItems:'flex-end'測(cè)試測(cè)試測(cè)試
視圖：
水平方向右對(duì)齊
垂直方向即flexDirection:'row'時(shí)舉例
1.垂直方向上對(duì)齊，alignItems:'flex-start'
垂直方向上對(duì)齊样傍，alignItems:'flex-start'測(cè)試測(cè)試測(cè)試
視圖：
垂直方向上對(duì)齊
2.垂直方向居中對(duì)齊横缔，alignItems:'center'
垂直方向居中對(duì)齊，alignItems:'center'測(cè)試測(cè)試測(cè)試
視圖：
垂直方向居中對(duì)齊
3.垂直方下對(duì)齊衫哥，alignItems:'flex-end'
垂直方下對(duì)齊茎刚，alignItems:'flex-end'測(cè)試測(cè)試測(cè)試
視圖：
垂直方下對(duì)齊
flexWrap
子元素超出容器時(shí)是否換行顯示:
flexWrap:'wrap'，表示超出則換行顯示撤逢，默認(rèn)超出換行顯示
flexWrap:'nowrap'膛锭，表示超出不換行顯示
舉例
1.父容器設(shè)置flexWrap:'wrap'表明包裹內(nèi)容粮坞，子元素超出父容器顯示范圍折行顯示，默認(rèn)情況不設(shè)置flexWrap就包裹內(nèi)容
父容器設(shè)置flexWrap:'wrap'表明包裹內(nèi)容初狰，子元素超出父容器顯示范圍折行顯示莫杈，默認(rèn)情況不設(shè)置flexWrap就包裹內(nèi)容測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試
視圖：
包裹內(nèi)容
2.父容器設(shè)置flexWrap:'nowrap'表明不包裹內(nèi)容，子元素超出父容器部分不被顯示跷究，默認(rèn)情況不設(shè)置flexWrap就包裹內(nèi)容
父容器設(shè)置flexWrap:'nowrap'表明不包裹內(nèi)容姓迅，子元素超出父容器部分不被顯示，默認(rèn)情況不設(shè)置flexWrap就包裹內(nèi)容測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試
視圖：
不包裹內(nèi)容
position
position:'absolute'俊马，表示絕對(duì)布局丁存；通過(guò)top，left柴我，bottom解寝，right指定相對(duì)于父容器的位置，默認(rèn)不設(shè)置為相對(duì)布局艘儒。
絕對(duì)位置局對(duì)垂直居中
視圖：
