ReactNative布局FlexBox

父容器布局属性

---

flexBox.png

1.FlexDirection：主轴方向（String）

• row(横向正向布局)
• row-reverse(横向逆向布局)
• column（纵向正向布局）【默认】
• column-reverse（纵向逆向布局）

2.flexWrap：单行元素是否支持换行（String）

• wrap(支持换行)
• nowrap（不支持换行）【默认】

3.justifyContent：主轴方向子视图对齐方式（String）

• flex-start (主轴开始的位置对齐)【默认】
• center（主轴中间位置对齐）
• flex-end （主轴结束的位置对齐）
• space-between （主轴两侧靠边对齐，item之间间隔平分）
• space-around（item之间间隔平分，主轴两侧为item之间间隔的一半）

4.alignItems：侧轴方向子视图对齐方式（String）

• flex-start (侧轴开始的位置对齐)【默认】
• center（侧轴中间位置对齐）
• flex-end （侧轴结束的位置对齐）
• stretch（拉伸填充）

子视图布局属性

---

box.png

1.alignSelf：子视图重写父容器的alignItems的属性（String）

• auto（父视图设置了就直接继承，否则为stretch）【默认】
• flex-start (侧轴开始的位置对齐)
• center（侧轴中间位置对齐）
• flex-end （侧轴结束的位置对齐）
• stretch（拉伸填充）

2.flex：子视图在父视图上的伸缩性，存在多个视图时，值越大，伸缩性越大（number）

• number

3.width，height：宽高(number)

• width(宽)
• height(高)

4.padding:内边距（number）

• padding（四周内边距）
• paddingHorizontal(水平方向上的内边距)
• paddingVertical(竖直方向的内边距)
• paddingLeft(左内边距)
• paddingRight(右内边距)
• paddingTop(上内边距)
• paddingBottom(下内边距)

5.margin:外边距(number)

• margin（四周外边距）
• marginHorizontal(水平方向上的外边距)
• marginVertical(竖直方向的外边距)
• marginLeft(左外边距)
• marginRight(右外边距)
• marginTop(上外边距)
• marginBottom(下外边距)

6.position:子视图在父视图中布局定位的方式

• relative（相对布局，子视图为流式布局不重叠）【默认】
  left: 相对于自己的位置左移
  right:相对于自己的位置右移
  。。。

• absolute（绝对布局，子视图相对于父视图布局）
  left: 相对于父视图的位置左移
  right:相对于父视图的位置右移
  。。。