首页手记 ReactNative Flex 布局

ReactNative Flex 布局

标签：

Html/CSS React.JS

起源

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 像素。

练习

小游戏

作者：Inlight先森
链接：https://www.jianshu.com/p/6962ea722dba

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

Qyouu

手记
篇

粉丝

88

获赞与收藏

414

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31246 346

网络编程入门教程

20个小节 12759 240

Pandas 入门教程

25个小节 18652 347

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

ReactNative Flex 布局

起源

基本概念

命名方式

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

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

Web CSS 不同之处

其他布局属性

练习

阅读免费教程