...
作为一名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
以上有错误之处，感谢指出
网友评论