美文网首页
ReactNative Flex布局

ReactNative Flex布局

作者: DanielXinYi | 来源:发表于2019-06-01 16:58 被阅读0次

    Flex 布局
    1.flexDirection (主轴方向)
    在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列呢?默认值是竖直轴(column)方向。
    column :竖直轴
    row :水平轴

    2.alignItems(主轴的排列方式)
    在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end、space-around以及space-between。
    flex-start、
    center、
    flex-end、
    space-around
    space-between。

    1. justifyContent(次轴的排列方式)
      在组件的style中指定alignItems可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end以及stretch。
      flex-start、
      center、
      flex-end
      stretch 注意:要使stretch选项生效的话,子元素在次轴方向上不能有固定的尺寸

    相关文章

      网友评论

          本文标题:ReactNative Flex布局

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