02基础语法--004--Flexbox 布局

[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,
    },
});