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布局_第1张图片
flex布局基本概念

父容器属性

- flexDirection

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

  • row

    flex布局_第2张图片
    row.png

  • column

    flex布局_第3张图片
    column.png

  • row-reverse

    flex布局_第4张图片
    row-reverse.png

  • column-reverse

    flex布局_第5张图片
    column-reverse.png

-flexWrap

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

  • nowrap
    flex布局_第6张图片
    nowrap.png
  • wrap
    flex布局_第7张图片
    wrap.png

-justifyContent

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

  • flex-start
    flex布局_第8张图片
    flex-start.png
  • flex-end
    flex布局_第9张图片
    flex-end.png
  • center
    flex布局_第10张图片
    center.png
  • space-between
    flex布局_第11张图片
    space-between.png
  • space-around
    flex布局_第12张图片
    sapce-around.png

-alignItems

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

  • flex-start
    flex布局_第13张图片
    flex-start.png
  • flex-end
    flex布局_第14张图片
    flex-end.png
  • center
    flex布局_第15张图片
    center.png

你可能感兴趣的:(flex布局)