美文网首页
菜鸡装B失败锦集-ReactNative支持的Flex6个属性

菜鸡装B失败锦集-ReactNative支持的Flex6个属性

作者: 菜鸡 | 来源:发表于2016-06-06 12:39 被阅读36次
    装逼布局常用6个属性:

    一:flexDirection 指定主轴的放向。
    1:row横着排列
    {flexDirection: 'row'}
    2:column竖着排列
    {flexDirection: 'column'}

    二:alignItems 相对于父层,子层竖着的排列方式。
    1:flex-start: 相对于父层顶部对齐。
    {alignItems: 'flex-start'}
    2:flex-end: 相对于父层底部对齐。
    {alignItems: 'flex-end'}
    3:center: 相对于父层竖着居中。
    {alignItems: 'center'}
    4:stretch: 竖着填充整个容器。(前提是子组件没有设置height属性)
    {alignItems: 'stretch'}

    三:justifyContent 相对于父层,子层横着的排列方式。
    1:flex-start:相对于父层左端靠齐。
    {justifyContent: 'flex-start'}
    2:flex-end:相对于父层右端靠齐。
    {justifyContent: 'flex-end'}
    3:center:相对于父层横着居中。
    {justifyContent: 'center'}
    4:space-between:相对于父层横着左右顶头平均分配。
    {justifyContent: 'space-between'}
    5:space-around:相对于父层横着左右平均分配,左右留空隙不顶头。
    {justifyContent: 'space-around'}

    四:alignSelf 设置子层单个的竖着对齐方式。
    1:auto:拿自身宽高。
    {alignSelf: 'auto'}
    2:street:竖着拉伸。
    {alignSelf: 'street'}
    3:flex-start:相对于父层顶部对齐。
    {alignSelf: 'flex-start'}
    4:flex-end:相对于父层底部对齐。
    {alignSelf: 'flex-end'}
    5:center:竖着居中。
    {alignSelf: 'center'}

    五:flex 指定伸缩容器的比例
    1:{flex: 1}
    这个就是占满整个屏幕。
    如果父层是flex:1子层有俩,每个flex:1就是平分整个界面。
    如果父层是flex:1子层有三个,flex:1,flex:1,flex:2,就是1,2宽度等于第三个。
    这个就是这么的神奇,自己活泥巴玩几下就知道了。

    六:flexWrap 设置是否换行
    1:nowrap:空间不够不换行。
    2:wrap:空间不够自动换行。
    这个没什么好说的了,换行否,英雄您自己瞅。

    相关文章

      网友评论

          本文标题:菜鸡装B失败锦集-ReactNative支持的Flex6个属性

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