flex布局

完整版

https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97.md

基本概念

flex布局基本概念

父容器属性

- flexDirection

默认取值flexColumn 确定子组件排列方向，取值及效果如下

• row
  

  

  row.png

• column
  

  

  column.png

• row-reverse
  

  

  row-reverse.png

• column-reverse
  

  

  column-reverse.png

-flexWrap

默认取值nowrap 定义子元素在父视图内是否允许多行排列 取值及效果如下

• nowrap
  
  

  nowrap.png
• wrap
  
  

  wrap.png

-justifyContent

默认取值flex-start 定义子元素在主轴方向的分配方式 取值及效果如下

• flex-start
  
  

  flex-start.png
• flex-end
  
  

  flex-end.png
• center
  
  

  center.png
• space-between
  
  

  space-between.png
• space-around
  
  

  sapce-around.png

-alignItems

默认取值stretch 与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐 取值及效果如下

• flex-start
  
  

  flex-start.png
• flex-end
  
  

  flex-end.png
• center
  
  

  center.png