[toc]
Flexbox 布局
CSS 盒模型主要有：margin、border、padding、content 四个属性构成
image.png
- margin：描述边框外的距离
- border：描述围绕在内边距和内容外的边框
- padding：表示内容与边框之间的填充距离
- content：表示需要填充的空间
Flexbox 布局属性分类
- 决定子组件的属性：flexWrap、alignItems、flexDirection、justifyContent
- 决定自身的属性：alignSelf、flex
flexDirection 属性
flexDirection 属性表示布局中子组件的排列方向，默认为 column，取值包括
-
column：纵向排列，从上到下 -
row：横向排列，从左到右 -
column-reverse：纵向排列，从下到上 -
row-reverse：横向排列，从右到左
column
image.png
row
image.png
row-reverse
image.png
column-reverse
image.png
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
export default FlexDirection = () => {
return (
<View style={styles.container}>
<Text style={styles.view_one}>视图1</Text>
<Text style={styles.view_two}>视图2</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'column-reverse'
},
view_one: {
height: 200,
width: 200,
textAlign: 'center',
fontSize: 28,
backgroundColor: 'red',
},
view_two: {
height: 200,
width: 200,
textAlign: 'center',
fontSize: 28,
backgroundColor: 'green',
}
});
flexWrap 属性
flexWrap 属性主要用于控制子组件单行还是多行显示，默认是wrap，取值包括：
-
wrap：换行，从上到下 -
nowrap：不换行 -
wrap-reverse：换行，从下到上
wrap
image.png
nowrap
image.png
wrap-reverse
image.png
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
export default FlexWrap = () => {
return (
<View style={styles.container}>
<Text style={styles.view}>视图1</Text>
<Text style={styles.view}>视图2</Text>
<Text style={styles.view}>视图3</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 200,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'row',
flexWrap: 'wrap',
},
view: {
height: 150,
width: 150,
alignItems: 'center',
alignSelf: 'center',
fontSize: 28,
backgroundColor: 'red',
},
});
justifyContent 属性
justifyContent 属性主要表明容器中子组件横向排列的位置，默认flex-start，取值包括：
-
flex-start：- 横向：从左到右排列
- 纵向：从上到下排列
-
flex-end：- 横向：从右到左排列
- 纵向：从下到上排列
-
center：- 横向：从左到右，居中排列
- 纵向：从上到下，居中排列
-
space-between：0:1:1:0 等分- 横向：水平方向，等分排列
- 纵向：从上到下排列
-
space-around：1:2:2:1 等分- 横向：从左到右排列
- 纵向：从上到下排列
alignItems 也可以用于控制容器中组组件的排列方向，默认情况下：
- alignItems 决定子组件在容器中的纵向排列
- justifyContent 决定子组件在容器中的横向排列
space-between
image.png
image.png
space-around
image.png
image.png
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
export default JustifyContent = () => {
return (
<View style={styles.container}>
<Text style={styles.view}>视图1</Text>
<Text style={styles.view}>视图2</Text>
<Text style={styles.view}>视图3</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
backgroundColor: '#F5FCFF',
alignItems: 'center',
flexDirection: 'row'
},
view: {
height: 100,
width: 100,
textAlign: 'center',
fontSize: 28,
backgroundColor: 'red',
},
});
alignSelf 属性
alignSelf 属性表明组件在容器内部的排列情况，与alignItems属性不同，alignSelf属性是在子组件内部定义的，取值包括：
-
auto：左 -
flex-start：左 -
flex-end：右 -
center：中 -
stretch：左
image.png
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
export default AlignSelf = () => {
return (
<View style={styles.container}>
<Text style={styles.view1}>视图1</Text>
<Text style={styles.view2}>视图2</Text>
<Text style={styles.view3}>视图3</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 200,
backgroundColor: '#F5FCFF',
},
view1: {
height: 150,
width: 150,
fontSize: 28,
backgroundColor: 'red',
alignSelf: 'flex-end',
},
view2: {
height: 150,
width: 150,
fontSize: 28,
backgroundColor: 'red',
alignSelf: 'center',
},
view3: {
height: 150,
width: 150,
fontSize: 28,
backgroundColor: 'red',
alignSelf: 'stretch',
},
});
flex 属性
flex 属性表明子控件占父空间的比例，即组件可以动态计算和配置自己所占用的空间大小，取值是数值，默认值为0，即不占用任何父类容器空间。
flex属性是实现自适应设备和屏幕尺寸的核心。
image.png
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
export default Flex = () => {
return (
<View style={styles.container}>
<Text style={styles.view1}>视图1</Text>
<Text style={styles.view2}>视图2</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 200,
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'row',
},
view1: {
height: 150,
width: 150,
fontSize: 28,
backgroundColor: 'red',
flex: 1,
},
view2: {
height: 150,
width: 150,
fontSize: 28,
backgroundColor: 'blue',
flex: 2,
},
});
网友评论