React-Native 第一章 布局

FlexBox 布局

一种布局模式，适用于不同的屏幕尺寸和不同的显示设备，它给页面元素提供了适配这些情况的能力

• flexDirection
  决定主轴的方向
  指定flex容器的子元素是按行显示还是按列显示，也可以定义元素按升序显示还是按降序显示。
  row: 主轴为水平方向，起点在左端
  row-reverse: 主轴为水平方向，起点在右端
  column: (默认值)主轴为垂直方向，起点在上沿
  column-reverse: 主轴在垂直方向，起点在 下沿
  
• justifyContent
  定义了伸缩项目在主轴线的对齐方式
  声明浏览器如何分配元素之外的可用空间，比如有3个节点，它们组合起来一共占据了容器的50%的空间，我们能够指定元素是集中在左边、右边还是中间，或者是均匀地从左往右分布，或者其他的一些方式。
  flex-start (默认值)伸缩项目向一行的起始位置靠齐
  flex_end 伸缩项目向一行的结束位置靠齐
  center 伸缩项目向一行的中间位置靠齐
  space-between 两端对齐，项目之间的间隔都相等
  space-around 伸缩项目会平均地分布在行里，两端保留一半的空间
  
• alignltems
  定义项目在交叉轴上如何对齐，可以把其想象成侧轴（垂直于主轴）的对齐方式
  flex-start 交叉轴的起点对齐
  flex-end 交叉轴的终点对齐
  center 交叉轴的中点对齐
  baseline 项目的第一行文字的基线对齐
  stretch （默认值）如果项目未设置高度或auto，将占满整个容器的高度
  
• flexwrap
  默认情况下项目都排在一条线上，flex-wrap属性定义，如果一条轴线排不下，如何换行
  指定当flex子元素的总宽度超出了容器的空间时，是否换行显示。
  nowrap 不换行
  wrap 换行，第一行在上方
  wrap-reverse 换行，第一行在下方
  

元素属性

• flex
  flex-grow flex-shrink flex-basis三个属性的缩写，其中第二个和第三个参数（flex-shrink flex-basis）是可选参数
  默认值为” 0,1,auto “;
  宽度 = 弹性宽度 * （flexGrow/sum(flexGrow)）
  
• alignSelf
  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  auto
  flex-start
  flex-end
  center
  baseline
  stretch