一、Flex布局--简介

• Flex是 FlexibleBox的缩写， 意为"弹性布局"， 用来为盒装模型提供最大的灵活性。
• 在React Native中使用Flexbox来指定子元素的布局。Flexbox可以在不同的屏幕尺寸上提供一致的布局结构。
• 一般来说，使用flexDirection, justifyContent和alignItems三个样式的属性就已经能满足大多数布局需求

二、Flex布局--container、item

• 采用Flex布局的元素，成为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
• 容器默认存在两根轴：水平主轴（main axis）和垂直交叉周（cross axis），也叫侧轴。默认烟主轴排列

• 主轴的开始位置（与边框的交叉点）叫做main start，结束的位置叫做main end；交叉轴开始的位置叫做cross start，结束的位置叫做cross end。

  
  container，item

三、Flex布局--flex

flex属性决定元素在主轴上如何填满可用区域。整个区域会根据每个元素设置flex属性值被分割成多个部分

<View style={[styles.container, {flexDirection:"column"}]}>
  <View style={{flex:1, backgroundColor:"red"}}/>
  <View style={{flex:1, backgroundColor:"darkorange"}}/>
  <View style={{flex:1, backgroundColor:"green"}}/>
</View>

四、Flex布局--flexDirection

• 在组件的style中指定flexDirection可以决定布局的主轴。子元素应该沿着水平轴（row）方向排列，还是沿着竖直轴（column）方向排列？默认值是竖直轴（column）方向

• flexDirection有四个值：
  row：主轴为水平方向，起点在左端
  row-reverse：主轴为水平方向，起点在右端
  column：主轴为垂直方向，起点在上沿
  column-reverse：主轴为垂直方向，起点在下沿

  
  主轴方向

五、Flex布局--justifyContent

• justifyContent属性定义的项目在主轴上的对齐方式
• justifyContent有六个值：
  flex-start：左对齐
  flex-end：右对齐
  flex-center：居中
  space-between：两端对齐，项目之间的间隔相等
  space-around：每个项目两侧间隔相等
  space-evenly：起始、末尾、相邻项目间隔相等

六、Flex布局--alignItems

• alignItems 属性定义项目在交叉轴（侧轴）上如何对齐

• alignItems有五个值：
  stretch：如果项目未设高度或者设为auto，将占满整个容器的高度
  flex-start：交叉轴的起点对齐
  flex-end：交叉轴的终点对齐
  flex-center：交叉轴的终点对齐
  baseline：项目的第一行文字的基线对齐

  
  alignItems

六、Flex布局--flexWrap

• 默认情况下，项目都排在一条线上（又称"轴线"）。flex-wrap属性定义，如果轴线排不下，如何换行。
• flexWrap有两个值：
  nowrap：不换行
  wrap：换行

七、Flex布局--alignSelf

• alignSelf属性允许单个项目有雨其他项目不一样的对齐方式，可覆盖alignItems属性。默认值为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch。
• alignSelf有五个值：
  stretch：如果项目未设置高度或者为auto，将占满整个容器的高度。
  flex-start：交叉轴的起点对齐
  flex-end：交叉轴的终点对齐
  center：交叉轴的中点对齐
  baseline：项目的第一行文字的基线对齐