FlexBox布局
2019-01-02 本文已影响7人
Torin76
一.flexDirection
父视图布局
1.flexDirection默认侧轴从上至下排列
row:主轴(行) column侧轴(列) reverse（反向）
<View style={ backgroundColor:"darkgray",marginTop:100}}>
<View style={{width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
2.flexDirection:'row' 主轴
<View style={{flexDirection:'row', backgroundColor:"darkgray",marginTop:100}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
3.flexDirection:'row-reverse' 主轴反向
<View style={{flexDirection:'row-reverse', backgroundColor:"darkgray",marginTop:100}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
二、flexWrap
flexWrap属性定义了子元素在父视图内是否允许多行排列，默认为nowrap。
nowrap flex的元素只排列在一行上，可能导致溢出
wrap flex的元素在一行排列不下时，就进行多行排列
<View style={{flexDirection:'row', flexWrap:'wrap',backgroundColor:"darkgray",marginTop:100}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:100,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:100,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:100,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:100,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
三、JustifyContent
JustifyContent属性定义了浏览器如何分配顺着父容器主轴的弹性（Flex）元素之间及其周围的空间，默认为flex-start。对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。
flex-start(default)
从行首开始排列。每行第一个元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐，其它元素与后一个对齐。
center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-around
在每行上均匀分配弹性元。相邻元素间距相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是和相邻元素之间距离的一半
space-evenly
间距都相同
space-between
在每行上均匀分配弹性元素。相邻元素间距相同。每行第一个元素到行尾的距离相同
四、alignItems
alignItems属性以与justifyContent相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。
flex-start
元素向轴起点对齐
flex-end
元素向轴终点对齐。
center
元素在侧轴居中。如果元素在侧轴上的高度高于其容器。那么两个方向上溢出距离相同
stretch
弹性元素被在侧轴方向被拉伸到与容器的高度或宽度
子视图布局
一、alignSelf
alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf属性可以重写灵活容器alignItems属性
auto(defalut)
元素继承了它的付容器的align-itemss属性。如果没有父容器则为stretch
stretch
元素被拉伸以适应容器
center
元素位于容器中心
flex-start
元素位于容器开头
flex-end
元素位于容器结尾
<View style={{flexDirection:'row', flexWrap:'nowrap',justifyContent:'space-around',alignItems:'center',backgroundColor:"darkgray",marginTop:100,height:500}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:50,height:50,backgroundColor:"darkcyan",margin:5,alignSelf:"flex-end"}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,alignSelf:'flex-start'}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
该列子中子视图1和子视图3设置alignSelf属性让子视图自身不随父视图的alignItems属性布局。效果图如下
Screenshot 2019-01-02_19-43-36-712.png
二、flex
相当与iOS中子视图的比例系数
<View style={{flexDirection:'column', flexWrap:'nowrap',justifyContent:'space-around',alignItems:'center',backgroundColor:"darkgray",marginTop:100,height:500}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:50,height:50,backgroundColor:"darkcyan",margin:5,flex:1}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,flex:2}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,flex:2}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,flex:1}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
2.png
参考博客
