ReactNative Flex 布局

作者: Inlight先森 | 来源:发表于2018-07-03 16:15 被阅读15次

起源

2009年，W3C 提出了一种新的方案----Flex 布局，Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size

基本概念

命名方式

属性命名为驼峰式的。正确：flexDirection。错误：flex-direction。

容器的属性（flexDirection，flexWrap，justifyContent，alignItems）

flexDirection 属性决定主轴的方向（即项目的排列方向）。

row：从左向右依次排列。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
    },
    red: {
        backgroundColor: 'red',
        height: 60,
        width: 60,
        margin: 5,

    },
    yellow: {
        backgroundColor: 'yellow',
        height: 60,
        width: 60,
        margin: 5,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 60,
        margin: 5,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

row

row-reverse：从右向左依次排列。

row-reverse

column：默认的排列方式，从上向下排列。

column

column-reverse：从下向上排列。

column-reverse

flexWrap 属性定义了如果一条轴线排不下，如何换行。

nowrap（默认）：元素只排列在一行上，可能导致溢出。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
    },
    red: {
        backgroundColor: 'red',
        height: 60,
        width: 60,
        margin: 5,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 60,
        width: 60,
        margin: 5,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 60,
        margin: 5,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

row && nowrap

wrap：元素在一行排列不下时，就进行多行排列。

row && wrap

wrap-reverse：多行排列，对 wrap 做一个反转。
RN 0.56 版本之后支持，目前 0.45.1 版本不支持此布局方式。

justifyContent 属性定义了项目在主轴上的对齐方式。

flex-start（默认值）：与主轴起点对齐。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start'
    },
    red: {
        backgroundColor: 'red',
        height: 60,
        width: 100,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 60,
        width: 60,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 150,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flex-start

flex-end：与主轴终点对齐。

flex-end

center：主轴居中对齐。

center

space-between：两端对齐，项目之间的间隔都相等。

space-between

space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

space-around

alignItems 属性定义项目在交叉轴上如何对齐。

stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'stretch',
    },
    red: {
        backgroundColor: 'red',
        height: 'auto',
        width: 60,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 'auto',
        width: 60,
    },
    blue: {
        backgroundColor: 'blue',
        height: 'auto',
        width: 60,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

stretch

height 给了高度之后，更改 alignItems 属性值的效果。

flex-start：元素向交叉轴起点对齐。

flex-start

flex-end：元素向交叉轴终点对齐。

flex-end

center：元素在交叉轴居中。如果元素在交叉轴上的高度高于其容器，那么在两个方向上溢出距离相同。

center

baseline: 项目的第一行文字的基线对齐。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'baseline',
    },
    red: {
        backgroundColor: 'red',
        height: 150,
        width: 60,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 60,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 60,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}>
                    <Text style={{ color: 'black', fontSize: 20 }}>里奥</Text>
                </View>
                <View style={ScreenStyle.yellow}>
                    <Text style={{ color: 'black', fontSize: 16 }}>梅西</Text>
                </View>
                <View style={ScreenStyle.blue}>
                    <Text style={{ color: 'black', fontSize: 25 }}>凉凉</Text>
                </View>
            </View>
        );
    }

baseline

flex 属性决定其占据父容器的比例。React Native 中 flex 只能是数字。如果是正整数，就是与数字的大小成比例。如果为 0 就是自生的大小，并且不能扩展。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
    },
    red: {
        backgroundColor: 'red',
        flex: 1,
    },
    yellow: {
        backgroundColor: 'yellow',
        flex: 2,
    },
    blue: {
        backgroundColor: 'blue',
        flex: 3,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flex

CSS 中 Flex 布局的内容在 React Native 中简化了一些，flex-flow（属性是 flexDirection 属性和 flexWrap 属性的简写形式，默认值为 row nowrap）和 align-content（属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）属性在 React Native 中没有。

项目属性（flexGrow，flexShrink，flexBasis，alignSelf）

flexGrow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
如果所有项目的 flexGrow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flexGrow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
    },
    red: {
        backgroundColor: 'red',
        width: 80,
        height: 80,
        flexGrow: 5,
    },
    yellow: {
        backgroundColor: 'yellow',
        width: 100,
        height: 100,
        flexGrow: 2,
    },
    blue: {
        backgroundColor: 'blue',
        width: 60,
        height: 60,
        flexGrow: 3,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flexGrow

将 flexDirection 改成 column

flexGrow

flexShrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
如果所有项目的 flexShrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flexShrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
负值对该属性无效。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'baseline',
    },
    red: {
        backgroundColor: 'red',
        height: 150,
        width: 500,
        flexShrink: 1,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 200,
        flexShrink: 1,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 300,
        flexShrink: 0,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flexShrink

flexBasis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'baseline',
    },
    red: {
        backgroundColor: 'red',
        height: 150,
        width: 500,
        flexBasis: 50,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 200,
        flexBasis: 100,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 300,
        flexBasis: 30,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flexBasis

alignSelf 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 alignItems 属性。

auto: 按照自身设置的宽高来显示，如果没设置，效果跟 stretch 一样。
flex-start: 与父容器顶部对齐。
flex-end: 与父容器底部对齐。
center: 位于中间位置。
stretch: 交叉轴拉伸，不设置具体的 width/height 的时候 stretch 才有效果。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    red: {
        backgroundColor: 'red',
        // height: 100,
        width: 100,
        alignSelf: 'stretch',
    },
    yellow: {
        backgroundColor: 'yellow',
        // height: 100,
        width: 100,
        alignSelf: 'stretch',
    },
    blue: {
        backgroundColor: 'blue',
        // height: 100,
        width: 100,
        alignSelf: 'stretch',
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

alignSelf_stretch

baseline: 项目的第一行文字的基线对齐。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    red: {
        backgroundColor: 'red',
        height: 50,
        width: 100,
        alignSelf: 'baseline',
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 100,
        alignSelf: 'baseline',
    },
    blue: {
        backgroundColor: 'blue',
        height: 180,
        width: 100,
        alignSelf: 'baseline',
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}>
                    <Text style={{ color: 'black', fontSize: 25 }}>世界杯</Text>
                </View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

alignSelf_ baseline

Web CSS 不同之处

flexDirection: React Native 中默认为 flexDirection:'column'，在 Web CSS 中默认为 flex-direction:'row'
alignItems: React Native 中默认为 alignItems:'stretch'，在 Web CSS 中默认 align-items:'flex-start'
flex: 相比 Web CSS 的 flex 接受多参数，如:flex: 2 2 10%;，但在 React Native 中 flex 只接受一个参数
不支持属性：align-content，order，flex-flow

其他布局属性

视图边框

borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
border<Bottom|Left|Right|Top>Color 个方向边框的颜色
borderColor 边框颜色

尺寸

width number
height number

外边距

margin number 外边距
marginBottom number 下外边距
marginHorizontal number 左右外边距
marginLeft number 左外边距
marginRight number 右外边距
marginTop number 上外边距
marginVertical number 上下外边距

内边距

padding number 内边距
paddingBottom number 下内边距
paddingHorizontal number 左右内边距
paddingLeft number 做内边距
paddingRight number 右内边距
paddingTop number 上内边距
paddingVertical number 上下内边距

边缘

left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

定位(position)
position enum('absolute', 'relative')属性设置元素的定位方式，为将要定位的元素定义定位规则。

absolute：生成绝对定位的元素，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

练习

小游戏

ReactNative Flex 布局

起源

基本概念

命名方式

容器的属性（flexDirection，flexWrap，justifyContent，alignItems）

项目属性（flexGrow，flexShrink，flexBasis，alignSelf）

Web CSS 不同之处

其他布局属性

练习

相关链接

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞