三、FlexBox

166 阅读1分钟

弹性盒模型 块和内联流方向

  • Flex container(父)
    • Flex Item(子)

代码注释: {/* 注释的内容*/}

常见的属性:

  • flexDirection: 'row', // 主轴方向,默认竖直方向(column)排列方式

  • justifyContent: 'flex-start', // 设置主轴的对齐方式 1.flex-start 默认方式 2.flex-end 3.space-around 4.space-between

  • alignItems // 侧轴的对齐方式 1.flex-start 2.flex-end 3.center 4.stretch 默认,不设置高度或者宽度,拉伸占满父类视图

  • flexWrap 一行显示不全换行显示 1.nowrap 默认不换行 2.wrap 换行,第一行在上方 3.wrap-reverse 换行,第一行在下方(RN中不常用)

元素中的属性

  • flex 按比例分配
  • alignSelf