1.Flex布局使用場景

• 快速布局所有子組件

2.主軸，側(cè)軸概念

• 主軸側(cè)軸相互垂直
• 主軸決定了子組件默認的布局方向，側(cè)軸決定了子組件與主軸垂直的布局方向

3.屬性：flexDirection

3.1.應用場景：決定主軸方向

3.2.可選值

row：水平，由左向右
row-reverse：水平，由右向左
column：垂直，由上到下
column-reverse：垂直，由下到上

3.3.代碼示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row'
    },
 baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:50,
        height:50,
        fontSize:15,
        textAlign:'center',
        margin:20,
    }
});

4.屬性：flexWrap

4.1.應用場景：是否允許子控件在父視圖中多行排列

4.2.可選值

nowrap：只允許單行，可能溢出
wrap：允許多行

4.3.代碼示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        flexWrap:'wrap'
    },
});

5.屬性justifyContent

5.1.使用場景：子組件在主軸中具體布局

5.2.可選值

flex-start：主軸水平，從左開始，主軸垂直，從上開始
flex-end：主軸水平，從右開始，主軸垂直，從下開始
center：主軸整體居中
space-between：相鄰元素間距離相同。每行第一個組件與行首對齊，每行最后一個組件與行尾對齊
space-around：相鄰元素間距離相同。每行第一個組件到行首的距離和每行最后一個組件到行尾的距離，是相鄰元素距離的一半

5.3.代碼示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around'
    },
   });

6.屬性alignItems

6.1.應用場景：子組件在側(cè)軸方向上的布局

6.2.可選值

flex-start：側(cè)軸水平，從左開始，主軸垂直，從上開始
flex-end：側(cè)軸水平，從右開始，主軸垂直，從下開始
center：側(cè)軸整體居中
stretch：子組件在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾?

6.3.代碼示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'stretch'
    },
});

7.屬性alignSelf

7.1.應用場景：某個子組件不想?yún)⒄漳JalignItems，自定義側(cè)軸布局

7.2.可選值

auto：繼承父控件alignItems，沒有父控件則自動轉(zhuǎn)換為stretch
flex-start：側(cè)軸起點對齊
flex-end：側(cè)軸終點對齊
center：側(cè)軸方向居中
stretch：側(cè)軸方向拉伸

7.3.代碼示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
 alignItems:'center'
    },
    baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:50,
        // height:50,
        fontSize:15,
        textAlign:'center',
        marginTop:20,
    },
    text3Style:{
        alignSelf:'flex-start'
    }
});

8.屬性Flex

8.1.應用場景：子組件在主軸中占據(jù)幾等份

8.2.可選值為任意數(shù)字，所有子組件flex值相加為分母，自己的數(shù)為分子，即可知自己在主軸中占據(jù)比例

8.3.代碼示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center'
    },
    baseTextStyle:{
        // width:50,
        // height:50,
        fontSize:15,
        textAlign:'center',
        marginTop:20,
    },
    text1Style:{
        flex:1,
        backgroundColor:'red',
    },
    text2Style:{
        flex:1,
        backgroundColor:'deepskyblue',
    },
   text3Style:{
        flex:3,
        backgroundColor:'green'
    },
    text4Style:{
        flex:1,
        backgroundColor:'blue',
    }
});