本文主要講解與flex布局相關(guān)的屬性，包括flex，flexDirection，alignItems，justifyContent，flexWrap等。React Native其他所有屬性均在LayoutPropTypes.js中定義，在編輯器中搜索LayoutPropTypes.js即可看到。文末附所有測試代碼。
首先定義幾個(gè)樣式，這樣在視圖中能更好的看到測試效果：
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'，子元素從上到下垂直排列測試測試
視圖：
默認(rèn)不設(shè)置flexDirection
2.父容器flexDirection:'column'，子元素從左到右水平排列：
父容器flexDirection:'column'，子元素從左到右水平排列測試測試測試
視圖：
父容器設(shè)置flexDirection:'column'
3.父容器flexDirection:'column'，子元素從上到下垂直排列，與默認(rèn)情況父容器不設(shè)置flexDirection相同：
父容器flexDirection:'column'，子元素從上到下垂直排列，與默認(rèn)情況父容器不設(shè)置flexDirection相同測試測試測試
視圖：
父容器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
表示在水平方向或垂直方向子元素的對齊方式，需要配合flexDirection使用。
當(dāng)父容器flexDirection:'row'時(shí)
justifyContent:'flex-start'，表示子元素水平方向左對齊
justifyContent:'center'，表示子元素水平居中對齊
justifyContent:'flex-end'，表示子元素水平方向右對齊
justifyContent:'space-between'，表示子元素水平方向元素之間間隔相同
justifyContent:'space-around'，表示子元素水平方向元素兩邊間隔相同
當(dāng)父容器flexDirection:'column'時(shí)
justifyContent:'flex-start'，表示子元素垂直方向上對齊
justifyContent:'center'，表示子元素垂直居下對齊
justifyContent:'flex-end'，表示子元素垂直方向居中對齊
justifyContent:'space-between'，表示垂直方向子元素之間間隔相同
justifyContent:'space-around'，表示垂直方向子元素兩邊間隔相同
水平方向即flexDirection:'row'時(shí)舉例
1.水平方向左對齊，justifyContent:'flex-start':
水平方向左對齊，justifyContent:'flex-start'測試測試測試
視圖：
水平方向左對齊
2.水平方向居中對齊，justifyContent:'center'：
水平方向居中對齊，justifyContent:'center'測試測試測試
視圖：
水平方向居中對齊
3.水平方向右對齊，justifyContent:'flex-end'：
水平方向右對齊，justifyContent:'flex-end'測試測試測試
視圖：
水平方向右對齊
4.水平方向元素之間間隔相同，justifyContent:'space-between'：
水平方向元素之間間隔相同，justifyContent:'space-between'測試測試測試
視圖：
水平方向元素之間間隔相等
5.水平方向元素兩邊間隔相同，justifyContent:'space-around'：
水平方向元素兩邊間隔相同，justifyContent:'space-around'測試測試測試
視圖：
水平方向元素兩邊間隔相等
垂直方向即flexDirection:'column'時(shí)舉例
1.垂直方向上對齊，justifyContent:'flex-start'
垂直方向上對齊，justifyContent:'flex-start'測試測試
視圖：
垂直方向上對齊
2.垂直方向居中對齊，justifyContent:'center'
垂直方向居中對齊，justifyContent:'center'測試測試
視圖：
垂直方向居中對齊
3.垂直方向下對齊，justifyContent:'flex-end'
垂直方向下對齊，justifyContent:'flex-end'測試測試
視圖：
垂直方向下對齊
4.垂直方向元素之間間隔相同，justifyContent:'space-between'
垂直方向元素之間間隔相同，justifyContent:'space-between'測試測試
視圖：
垂直方向元素之間間隔相同
5.垂直方向元素兩邊間隔相同，justifyContent:'space-around'
垂直方向元素兩邊間隔相同，justifyContent:'space-around'測試測試
視圖：
垂直方向元素兩邊間隔相同
alignItems
表示在水平方向或垂直方向子元素的對齊方式，需要配合flexDirection使用。與之相似的還有alignSelf，alignSelf表示自己相對于父容器的對齊方式，用法與alignItems相同。這里要注意，alignItems與justifyContent在flexDirection上的對齊方向相反。
當(dāng)父容器flexDirection:'column'時(shí)
alignItems:'flex-start'，表示子元素水平方向左對齊
alignItems:'center'，表示子元素水平居中對齊
alignItems:'flex-end'，表示子元素水平方向右對齊
當(dāng)父容器flexDirection:'row'時(shí)
alignItems:'flex-start'，表示子元素垂直方向上對齊
alignItems:'center'，表示子元素垂直居下對齊
alignItems:'flex-end'，表示子元素垂直方向居中對齊
水平方向即flexDirection:'column'時(shí)舉例
1.水平方向左對齊，alignItems:'flex-start'
水平方向左對齊，alignItems:'flex-start'測試測試測試
視圖：
水平方向左對齊
2.水平方向居中對齊，alignItems:'center'
水平方向居中對齊，alignItems:'center'測試測試測試
視圖：
水平方向居中對齊
3.水平方向右對齊，alignItems:'flex-end'
水平方向右對齊，alignItems:'flex-end'測試測試測試
視圖：
水平方向右對齊
垂直方向即flexDirection:'row'時(shí)舉例
1.垂直方向上對齊，alignItems:'flex-start'
垂直方向上對齊，alignItems:'flex-start'測試測試測試
視圖：
垂直方向上對齊
2.垂直方向居中對齊，alignItems:'center'
垂直方向居中對齊，alignItems:'center'測試測試測試
視圖：
垂直方向居中對齊
3.垂直方下對齊，alignItems:'flex-end'
垂直方下對齊，alignItems:'flex-end'測試測試測試
視圖：
垂直方下對齊
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)容測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
視圖：
包裹內(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)容測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
視圖：
不包裹內(nèi)容
position
position:'absolute'，表示絕對布局；通過top，left，bottom，right指定相對于父容器的位置，默認(rèn)不設(shè)置為相對布局。
絕對位置局對垂直居中
視圖：
