ReactNative Flex 布局

起源

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)
  1. 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
  1. 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 版本不支持此布局方式。
  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
  1. 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)
  1. 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
  1. 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
  1. 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
  1. 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
其他布局属性
  1. 视图边框
  • borderBottomWidth number 底部边框宽度
  • borderLeftWidth number 左边框宽度
  • borderRightWidth number 右边框宽度
  • borderTopWidth number 顶部边框宽度
  • borderWidth number 边框宽度
  • border<Bottom|Left|Right|Top>Color 个方向边框的颜色
  • borderColor 边框颜色
  1. 尺寸
  • width number
  • height number
  1. 外边距
  • margin number 外边距
  • marginBottom number 下外边距
  • marginHorizontal number 左右外边距
  • marginLeft number 左外边距
  • marginRight number 右外边距
  • marginTop number 上外边距
  • marginVertical number 上下外边距
  1. 内边距
  • padding number 内边距
  • paddingBottom number 下内边距
  • paddingHorizontal number 左右内边距
  • paddingLeft number 做内边距
  • paddingRight number 右内边距
  • paddingTop number 上内边距
  • paddingVertical number 上下内边距
  1. 边缘
  • left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
  • top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
  1. 定位(position)
    position enum('absolute', 'relative')属性设置元素的定位方式,为将要定位的元素定义定位规则。
  • absolute:生成绝对定位的元素,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
练习

小游戏

相关链接

勾三股四

facebook.github.io

Flex 布局教程:语法篇

React Native布局详细指南

CSS 参考手册

推荐阅读更多精彩内容