美文网首页
[React-Native]RN组件学习-FlexBox布局

[React-Native]RN组件学习-FlexBox布局

作者: 美乃滋酱啊 | 来源:发表于2016-08-09 17:51 被阅读62次

flex-box布局实践(一)

基础知识:

  • flex属性

    flex属性将会控制所属的view的大小为剩余空间的比例:

  • 如果拥有该属性的控件的sibling没有flex属性,则该控件就布满剩余的空间;

  • 如果其子控件具备flex属性,则就和android原生中的weight具备一样的功能。

  • 给具备flex属性的view添加height(或者width,这需要看flexDirection的属性),其实是没有什么用的。(和android原生的weight属性一致)。

  • flexDirection属性

表明使用flex布局的控件应该在什么方向进行排列,该属性只有

  • column(列)
  • row(行,默认属性

这两个属性。

  • justifyContent属性

表明通过flexDirection属性声明后,在其声明的方向上(row或者column)进行的排列情况

  • flex-start(默认属性)

    flex-start
  • center

    center
  • flex-end

    flex-end
  • space-around

    space-around
  • space-between

    space-between
  • alignItems属性

表明使用justfyContent属性方向上的主轴,而以另外一个方向为次轴上的排列。

如果没有height属性,则默认是包裹子view的height高度

下面是示例(其中justyfyContent属性值为:center)

  • flex-start flex-start
  • center center
  • flex-end flex-end
  • stretch stretch

其中flex-startstretch的区别是:

如果使用flexbox进行布局的字控件没有height这个属性,那么

  • flex-start flex-start
    就什么都没了
  • stretch stretch
    则会自动在其次轴上伸展(stretch)至父的高度(长度)

相关文章

网友评论

      本文标题:[React-Native]RN组件学习-FlexBox布局

      本文链接:https://www.haomeiwen.com/subject/nmedsttx.html