【React Native】Flexbox弹性布局

...

作为一名RN初学者（连菜鸟都算不上），在学习RN的过程中对一些知识点做一些记录，顺便加上一些自己的理解。如有说错之处，还望指出。谢谢！！！

介绍

Flexbox指的是一个模块，包括容器（flex容器）上的属性以及容器子元素（flex项目）上的属性。
React Native中使用Flexbox来指定某个组件子元素的布局，可以自动调整，计算元素在容器空间中的大小。从而在不同屏幕尺寸上提供一致的布局结构。

使用

本文主要以每种属性的使用，及其所对应的效果的方式来说明。这里主要对 flexDirection、justifyContent、alignItems、flexWrap、alignSelf、flex等进行介绍。

轴

在使用前，先了解下水平轴和竖直轴的概念，直接看图就好了。

轴

详细用法

下面将对Flexbos中常用到的一些属性进行讲解

flexDirection（容器属性）

flexDirection——决定布局的主轴（与主轴相垂直的为次轴）

取值：

• column（默认）：竖直排列（上 -> 下）
• column-reverse：竖直排列（下 -> 上）
• row：水平排列（左 -> 右）
• row-reverse：水平排列（右 -> 左）

代码如下：（省略部分代码，请忽略代码的粗糙）

代码

效果：

效果

justifyContent（容器属性）

justifyContent——决定其子元素沿着主轴的排列方式

代码：

代码

取值：

• flex-start(默认)：位于容器的开头；
  

  

  flex-start

• center：位于容器的中心；
  

  

  center

• flex-end：位于容器的结尾；
  

  

  flex-end

• space-around：位于各行之前、之间、之后都留有空白的容器内；
  

  

  space-around

• space-between：位于各行之间留有空白的容器内。
  

  

  space-between

alignItems（容器属性）

alignItems ——决定其子元素沿着次轴（与主轴垂直的轴）的排列方式

代码：

代码

取值：

• flex-start(默认)：位于容器的开头；
  

  

  flex-start

• center：位于容器的中心；
  

  

  center

• flex-end：位于容器的结尾；
  

  

  flex-end

• stretch：项目被拉伸以适应容器。
  

  

  stretch

flexWrap（容器属性）

flexWrap——控制换行（如果子View放不下，则自动换行）

代码：

代码

取值:

• nowrap(默认)：不自动换行

nowrap

可以从图中看到，超过的部分被裁剪了。

• wrap：自动换行
  
  

  wrap

alignSelf（子元素属性）

alignSelf——设置子布局在交叉轴方向位置

代码：

代码

取值：

• auto(默认):如果有父元素，就为元素的父元素的align-items的值，否则为stretch

• center：位于容器的中心；

• flex-start：位于容器的开头；

• flex-end：位于容器的结尾；

• stretch：项目被拉伸以适应容器。

效果：

效果

flex（子元素属性）

flex——权重，分配主轴上剩余的空间（类似Android中weight）
直接看例子

默认图：

flex-start

• 例1：

  
  
  

  代码1
  
  

  效果：

  
  
  

  效果1

• 例2

  
  
  

  代码2
  
  

  效果：

  
  
  

  效果2

（持续更新中...）

参考链接

React Native 中文网
一个完整的Flexbox指南
[React Native]弹性布局Flexbox

以上有错误之处，感谢指出