flex 布局

基本使用：

  父容器的设置：

  display：flex，默认主轴为row（横轴），父容器内的子元素会横向排列。

  flex-direction：row | row-reverse。改变主轴方向使用属性。

  justify-content: center，子元素主轴方向居中。

  align-item:center，子元素在交叉轴方向居中。

    上面两个属性下其他的属性值：space-between，让空隙在各元素之间平均分配，元素最两侧无空隙；space-around，让空隙在各元素之间平均分配，元素最两侧留较小空隙；space-evenly，让空隙均匀分布在所有元素的两侧。flex-start，和交叉轴的起点对齐。

  一级子元素的设置：

  align-self: end，子元素在交叉轴方向在开头位置。

  order: 0,设定布局的顺序，越小越靠前。

  flex，三个属性的缩写，简单理解为当前元素所占总空间的比例。