项目连接： 93Laer/MyDemo
ReactNative使用手册
前言：
flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。
FlexBox布局属性
flexDirection主轴方向：flexDirection属性用来设置主轴的方向，即视图中子控件的排列顺序，有如下几种选项：
-
column（默认值）：子控件从上向下排列；
column -
column-reverse：子控件从下向上排列；
column-reverse
-
row：子控件从左向右排列；
row -
row-reverse：子控件从右向左排列。
row-reverse
justifyContent对齐方式：justifyContent属性是container用来设置伸缩项（可理解为item）在主轴线的对齐方式，有如下几种选项：
- flex-start（默认值）：向主轴方向的起始端靠齐；
- flex-end：向主轴方向的结尾端靠齐；
- center：向主轴中间靠齐；
- space-between：两段靠齐，项之间间隔相等，主轴两段没有空隙；
- space-around：项平均的分布在主轴上，每个项的两段都有空隙。
当flexDirection是row的时候效果图，其它类推
image.png
alignItems侧轴对齐方式：alignItems属性用来设置伸缩项（item）在侧轴上的对齐方式（侧轴永远垂直于主轴）例如：当主轴是水平的时候那么侧轴就是竖直，有如下几种选项：
- stretch（默认值）：如果没有设置项的高度或设置为auto，则项将占满侧轴。
- flex-start：向侧轴方向的起始端靠齐。
- flex-end：向侧轴方向的末尾端靠齐。
- center：向侧轴的中间靠齐。
image.png
flexWrap流式布局样式：flexWrap属性用来设置流式布局（当所有项不能显示在一行中时，换行显示）的样式，有如下几种选项：
- nowrap（默认值）：不包含所有内容，可理解为不换行；
- wrap：包含所有内容，可理解为换行，新行在旧行下方；
wrap
喜欢请点赞，或是关注，后续将完善发布更多的文章，你的鼓励就是我的动力（程序员最大的动力莫过于同行的鼓励）
