FlexBox布局

一、FlexBox

  弹性盒子模型（The Flexible Box Module），又叫FlexBox，意为“弹性布局”，旨在通过弹性的方式来对齐和布局容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。

  Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间

二、FlexBox的常用属性

 2.1、容器属性

  flexDirection：该属性决定主轴的方向（即项目的排列方向）

   row：主轴为水平方向,起点在左端

  row-reverse：主轴为水平方向，起点在右端

  column（默认值）：主轴为垂直方向，起点在上沿

  column-reverse：主轴为垂直方向，起点在下沿

  justifyContent：定义了伸缩项目在主轴线的对齐方式

   flex-start（默认值）：伸缩项目向一行的起始位置靠齐

   flex-end：伸缩项目向一行的中间位置靠齐

  center：伸缩项目向一行的中间位置靠齐

  space-between：两端对齐，项目之间的间隔相等

  space-around：伸缩项目会平均地分布在行里，两端保留一半的空间

  alignItems：定义项目在交叉轴上如何对齐，可以把其想象成测轴（垂直于主轴）的对齐方式

  alignItems的值：

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

   flexWrap：默认情况下，项目都排在一条线（又称轴线）上

   flexWrap的值：

nowrap：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方。（和wrap相反）