前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Native探索(四)Flexbox布局详解

React Native探索(四)Flexbox布局详解

作者头像
用户1269200
发布2018-02-01 14:49:43
3.2K0
发布2018-02-01 14:49:43
举报
文章被收录于专栏:刘望舒

前言

在Android开发中我们有很多种布局,比如LinearLayout和RelativeLayout,同样在React Native也有它的布局,这个布局就是Flexbox布局。在CSS、React Native和Android等都有它的身影。这一篇文章,我们就通过各种小例子来掌握React Native中的Flexbox布局。

1.Flexbox布局概述

Flexbox译为弹性布局(这里我们简称Flex),是CSS的一种布局方案,可以简单、完整、响应式的实现各种页面布局。不只是在CSS中应用,在React Native也使用了Flex,基本和CSS中的Flex类似。甚至在Android开发中我们也会用到Flex,谷歌提供了基于Flex的FlexboxLayout,以便于处理复杂的布局,因此,学习Flex布局对于Android开发也是有帮助的。 采用Flex布局的元素,称为Flex容器(flex container),简称容器,它的所有子元素则是Flex容器的成员称为Flex项目(flex item),简称项目。如下图所示。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做main start,结束位置叫做main end。相似的,交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列,它在主轴上的长度叫做main size,交叉轴上的长度叫做cross size。

2.Flexbox容器属性

在CSS(React)中容器属性有6种,而在React Native中容器属性有5种,它们分别是:

  • flexDirection
  • justifyContent
  • alignItems
  • alignContent
  • flexWrap

下面通过小例子来分别介绍这些Flexbox容器属性。

flexDirection

flexDirection属性可以决定主轴的方向(即项目的排列方向),它有以下取值:

  • column(默认值):主轴为垂直方向,起点在顶端。
  • row:主轴为水平方向,起点在左端。
  • column-reverse:主轴为垂直方向,起点在下端。
  • row-reverse:主轴为水平方向,起点在右端。

我们先将flexDirection设置为row,代码如下所示。

运行效果如下图所示。

可以看出项目(子组件)是水平排列的,并且起点在左端。关于例子中的颜色设定可以查看官网文档。我们也可以将flexDirection设置为row-reverse,来查看效果:

可以看出Flex项目同样是水平排列的,只是起点在右端。

justifyContent

justifyContent属性用于定义项目在主轴上的对齐方式。它的取值有以下几种:

  • flex-start(默认值):项目与父容器左端对齐。
  • flex-end:项目与父容器右端对齐。
  • center:居中。
  • space-between: 两端对齐,并且项目间隔相等。
  • space-around:每个项目的两侧间隔相等,因此,项目之间的间隔是项目与父容器边缘间隔的2倍。

我们将justifyContent设置为flex-end,代码如下所示。

效果如下所示。

接下来我们分别设置justifyContent为flex-start和center,效果分别如下所示。

接下来我们分别设置justifyContent为space-between和space-around来查看它们有什么区别,效果分别如下所示。

上面左图是设置了space-between,可以看出最左边和最右边的项目都和父容器没有间隔,并且项目之间的间隔是相等的。右图的是space-around,最左边和最右边的项目都和父容器有间隔,并且项目之间的间隔是项目与父容器的间隔的2倍。

alignItems

alignItems用于定义项目在交叉轴上的对齐方式。它的取值有以下几种:

  • flex-start:项目与父容器的顶部对齐。
  • flex-end:项目与父容器的底部对齐。
  • center:居中。
  • baseline :项目的第一行文字的基线对齐。
  • stretch:(默认值)如果项目未设置高度或者高度设为auto,项目将占满整个容器的高度,否则该取值不会生效。

将alignItems设置为flex-end,代码如下所示。

效果如下图所示。

看到flex-end的效果,flex-start和center的效果也很容易知道。我们接下来将alignItems设置为stretch,需要注意的是,当项目没有设置高度或者高度设为auto时,stretch才会生效。这里为了验证效果,将所有项目的高度设置为auto。

效果如下图所示。

可以看出,当alignItems设置为stretch时,项目会占满整个容器的高度。

alignContent

alignContent用于多行项目在交叉轴上的对齐方式。如果项目只有一行,该属性是不起作用的。它的取值有 flex-start 、flex-end 、 center 、space-between 、 space-around 和 stretch,只比justifyContent的取值多了一个stretch(默认值,含义和alignItems的stretch类似),alignContent的取值的含义和justifyContent的取值的含义类似,这里就不做举例了。

flexWrap

flexWrap用于设置如果一行排不下,如何换行。它的取值有以下几种:

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方。

我们将flexWrap设置为wrap,代码如下所示。

效果如下所示。

3.Flexbox项目属性

在React Native中项目属性有很多中,具体的可以参考:Layout Props。这里介绍flexGrow、flexShrink、flexBasis、flex和alignSelf。

flexGrow

flexGrow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

我们将第二个项目flexGrow设置为2,其他的项目flexGrow设置为1,这样第二个项目所占的剩余空间是其他项目的两倍。如下图所示。

flexShrink

flexShrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

我们将第二个项目的flexShrink设置为0,其他的项目都为1,这样当空间不足时,第二个项目不会缩小,如下图所示。

flexBasis

flexBasis属性定义了项目的初始宽度。它的默认值为auto,即项目的本来的宽度。我们知道width也可以用来设置项目的宽度,如果项目同时设置了width和flexBasis,那么flexBasis会覆盖width的值。

效果如下图所示。

flex

如果我们每次都要设定flex-grow、flex-shrink和 flex-basis属性,显然有些麻烦,这时我们可以用flex 属性,它是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性,默认值为0 1 auto,其中后两个属性可选。关于flex这里就不做举例了。

alignSelf

alignSelf属性和alignItems属性类似,只不过alignSelf作用于项目,它允许单个项目有与其他项目不一样的对齐方式,并且覆盖alignItems属性。alignSelf默认值为为auto,表示继承父元素的alignItems属性,如果没有父元素,则等同于stretch。alignSelf有五种取值:auto、flex-start、flex-end、center、baseline和stretch,除了多了auto,其他的取值都和alignItems的取值含义一样。

运行效果如下所示。

好了,关于Flexbox布局就讲到这,还有很多属性这里没有提到,比如:margin、padding、marginRight和maxWidth等等,这些属性我们一看名字就知道它的作用(Android开发者角度),因此这里就不多介绍了,更多的属性请查阅官方文档

参考资料 官方文档 Flex 布局教程:语法篇---阮一峰 React-Native之flexbox布局篇

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-05-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 刘望舒 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 1.Flexbox布局概述
  • 2.Flexbox容器属性
    • flexDirection
      • justifyContent
        • alignItems
          • alignContent
            • flexWrap
            • 3.Flexbox项目属性
              • flexGrow
                • flexShrink
                  • flexBasis
                    • flex
                      • alignSelf
                      相关产品与服务
                      容器服务
                      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档