ReactNative从零到完整项目-Flexbox使用

项目连接： 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
  
  喜欢请点赞，或是关注，后续将完善发布更多的文章，你的鼓励就是我的动力（程序员最大的动力莫过于同行的鼓励）