美文网首页
iOS学习React-Native 的flexbox布局

iOS学习React-Native 的flexbox布局

作者: 酷比Xcoder | 来源:发表于2016-11-09 18:19 被阅读46次

    FlexBox布局

    属性1:flexDirection

    row:按行进行排列

    column:按列进行排列

    属性2:justifyContent-在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。

    flex-start:伸缩项目与父容器左端靠齐。

    flex-end:与父容器右端靠齐。

    center:水平居中。

    space-between:第一个子组件位于父容器左端,最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上。

    space-around:所有子组件平均分配在父容器的水平方向上,左右都有留隙。

    属性3:alignItems -决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式

    flex-start:与父组件的顶部对齐

    flex-end:与父组件的底部对齐

    center:处于父容器的中间位置

    stretch:竖直上填充整个容器

    属性4:alignSelf-设置子控件自身在父控件的对齐方式

    auto:按照自身设置的宽高来显示,如果没设置,效果跟streth一样。

    flex-start:与父容器顶部对齐。

    flex-end:与父容器底部对齐。

    center:位于垂直位置。

    streth:垂直拉伸。

    属性4: flex-设置伸缩项目的伸缩样式

    如果在同一个父控件中,没设置宽度的几个控件按行排列,设置flex为1,2,4

    flex为2的组件宽度为flex为1宽度的两倍,flex为4组件宽度则为flex为1的组件宽度的4倍。





    解释:justifyContent指顺着指定的主轴进行排列--可以理解为如果指定主轴(即derection)为row,即为子控件在X轴上面一个一个依次排列,并且在X轴上面的排列方式为指定的方式。

    例:指定direction为row,jsutifyContent为center,alignItems为center。我理解的是把3个控件放好,放好后看作一个整体,放在主轴的中心(center),次轴的中心(center)

    例:指定direction为row,jsutifyContent为flex-start,alignItems为center。我理解的是把3个控件放好,放好后看作一个整体,放在主轴的左边(flex-start),次轴的中心(center)

    相关文章

      网友评论

          本文标题:iOS学习React-Native 的flexbox布局

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