[React-Native]RN组件学习-FlexBox布局

flex-box布局实践（一）

基础知识：

• flex属性

  flex属性将会控制所属的view的大小为剩余空间的比例:

• 如果拥有该属性的控件的sibling没有flex属性，则该控件就布满剩余的空间；

• 如果其子控件具备flex属性，则就和android原生中的weight具备一样的功能。

• 给具备flex属性的view添加height（或者width,这需要看flexDirection的属性），其实是没有什么用的。（和android原生的weight属性一致）。

• flexDirection属性

表明使用flex布局的控件应该在什么方向进行排列，该属性只有

• column（列）
• row（行,默认属性）

这两个属性。

• justifyContent属性

表明通过flexDirection属性声明后，在其声明的方向上（row或者column）进行的排列情况

• flex-start(默认属性)

  

  flex-start

• center

  

  center

• flex-end

  

  flex-end

• space-around

  

  space-around

• space-between

  

  space-between

• alignItems属性

表明使用justfyContent属性方向上的主轴，而以另外一个方向为次轴上的排列。

如果没有height属性，则默认是包裹子view的height高度

下面是示例（其中justyfyContent属性值为：center）

• flex-start
  

  flex-start
• center
  

  center
• flex-end
  

  flex-end
• stretch
  

  stretch

其中flex-start和stretch的区别是：

如果使用flexbox进行布局的字控件没有height这个属性，那么

• flex-start
  

  flex-start
  
  就什么都没了
• stretch
  

  stretch
  
  则会自动在其次轴上伸展（stretch）至父的高度（长度）