【RN - 基础】之FlexBox弹性布局
前言
弹性盒模型（The Flexible Box Module），又叫FlexBox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同的屏幕，为盒装模型提供最大的灵活性。
FlexBox在大部分情况下都是处理Item在Container中位置和尺寸的关系。
FlexBox在布局中能解决很多问题，如浮动布局、屏幕适配、水平垂直居中、自动分配宽度等。
FlexBox布局属性
flexDirection主轴方向：
flexDirection属性用来设置主轴的方向，即视图中子控件的排列顺序，有如下几种选项：
- column（默认值）：子控件从上向下排列；
- column-reverse：子控件从下向上排列；
- row：子控件从左向右排列；
- row-reverse：子控件从右向左排列。
justifyContent对齐方式：
justifyContent属性用来设置伸缩项在主轴线的对齐方式，有如下几种选项：
- flex-start（默认值）：向主轴方向的起始端靠齐；
- flex-end：向主轴方向的结尾端靠齐；
- center：向主轴中间靠齐；
- space-between：两段靠齐，项之间间隔相等，主轴两段没有空隙；
- space-around：项平均的分布在主轴上，每个项的两段都有空隙。
alignItems侧轴对齐方式：
alignItems属性用来设置伸缩项在侧轴上的对齐方式（侧轴永远垂直于主轴），有如下几种选项：
- stretch（默认值）：如果没有设置项的高度或设置为auto，则项将占满侧轴；
- flex-start：向侧轴方向的起始端靠齐；
- flex-end：向侧轴方向的末尾端靠齐；
- center：向侧轴的中间靠齐。
flexWrap流式布局样式：
flexWrap属性用来设置流式布局（当所有项不能显示在一行中时，换行显示）的样式，有如下几种选项：
- nowrap（默认值）：不换行；
- wrap：换行，新行在旧行下方；
- wrap-reverse：换行，新行在旧行上方。
注意：flexWrap属性在iOS上可以正常设置，但在Android上如果不加额外的设置，则只会显示第一行，解决方法是添加style：alignItems: ’flex-start’
FlexBox元素属性
flex元素比重：
flex属性是flex-grow、flex-shrink和flex-basis三个属性的组合体，其中后两个属性是可选属性。三个属性具体解释如下：
- flex-grow：元素占当前容器中的弹性宽度的比重，默认是0；
- flex-shrink：缩小元素的宽度，值越大缩的越小，默认值是1；
- flex-bisis：相当于CSS中的width属性，默认值是auto。
元素在容器中的宽度/高度的计算公式：宽/高度 = 弹性宽度 * (flow-grow / sum(flow-grow));
alignSelf：
alignSelf属性允许单个元素有与其他元素不一样的对齐方式，有如下几种选项：
- auto（默认值）：集成父容器的对齐方式，如果没有父容器，则相当于stretch；
- flex-start：当前元素向父容器的起始端靠齐；
- flex-end：当前元素向父容器的结尾端靠齐；
- center：当前元素向父容器的中间靠齐；
- stretch：当前元素拉伸铺满父容器。
注意：alignSelf属性相当于将父容器的alignItems属性进行了覆盖。
FlexBox其他方法
获取当前屏幕的宽度（高度、分辨率使用同样方法获取）：
let Dimensions = require('Dimensions');
let width = Dimensions.get('window').width;
获取当前屏幕的宽度、高度、分辨率：
let Dimensions = require('Dimensions');
let {width, height, scale} = Dimensions.get('window');
补充参考
原文：https://www.cnblogs.com/itgungnir/p/6441057.html
