flex布局

flexbox布局

flexbox是啥

flexbox，弹性盒子，最早是w3c组织定义的一个布局规范，用于浏览器网页元素布局，并定义到Css规范中；
由于功能强大、布局简单, flexbox规范被一些开源组织在移动App以及其它应用软件上实现； React-Native上的flexbox实现引擎是yoga

RN上的flexbox

RN上的flexbox和web css上的有一些区别，为避免入坑，后续开发RN的时候以下面两个网站的文档为准：

• RN中文网布局文档：RN中文网 Layout Props
• 英语六级党请进这里： React-Native Layout Props

布局介绍

• flexDirection: 子组件布局的主轴方向
  • row (默认): 主轴为水平方向，起点在左端
  • column : 主轴为垂直方向，起点在上沿
  • row-reverse :主轴为水平方向，起点在右端
  • column-reverse : 主轴为垂直方向，起点在下沿

• justifyContent: 子组件在主轴上的对其方式
  • flex-start : 首对其
  • flex-end : 尾对其
  • center : 居中
  • space-between: 两端对齐
  • space-around: 组件直接的间距相等

• alignItems: 子组件在次轴上的对其方式
  • flex-start : 首对其
  • flex-end : 尾对其
  • center : 居中
  • stretch(默认): 将占满整个容器的高度或宽度

• alignSelf: 组件自身在次轴上的对其方式，会覆盖父组件的alignItems布局属性

  • auto (默认): 沿用父组件的alignItems布局属性
  • flex-start : 首对其
  • flex-end : 尾对其
  • center : 居中
  • stretch : 如果项目未设置高度或未设置为auto，将占满整个父容器的高度或宽度

• flexWrap: 换行模式

• nowrap(默认): 不换行

• wrap : 换行

• flex
  0或负数，根据其子组件内容分配长宽，
  正数0-1之间表示占父组件的比例；
  如果一个组件下面的两个子组件的flex值都大于1，将对这两个组件按比例分配空间

• flexGrow
  弹性拉升的放大比例，default:0, 当子组件未铺满主轴时，可以通过这个属性让子组件比例均分主轴空间，

• flexShrink
  弹性收缩的缩小比例，default:1, 当子组件铺满主轴时，可以通过这个属性让子组件按比例均分主轴空间

• 宽高

• height、width 指定宽高

• maxHeight、maxWidth、minHeight、minWidth 最大、最小宽高

• 外边距

• margin 同时指定上下左右外边距

• marginTop、marginBottom、marginLeft、marginRight 分别指定上下左右外边距

• marginHorizontal、marginVertical 水平、垂直外边距

• 内边距

  • padding 同时指定上下左右内边距
  • paddingTop、paddingBottom、paddingLeft、paddingRight 分别指定上下左右内边距
  • paddingHorizontal、paddingVertical 水平、垂直内边距

• position

  • absolute 绝对布局， 指定属性left/right/top/bottom/width/height配合使用
  • relative 相对布局， 相对同级别的上一个节点组件，指定属性left/top/width/height配合使用

• left 距离左侧多少距离

• right 距离左侧多少距离

• top 距离顶部多少距离

• bottom 距离底部多少距离

• zIndex 视图显示层级，默认0，数值越大的显示在上层