flext弹性布局

项目在容器中的显示

容器中的主轴和交叉轴
在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴排列容器的一些属性
有六个常用属性设置在容器上，分别为：

flex-direction 属性设置容器主轴的方向
包含四个属性值：
row: 默认值，表示沿水平方向，由左到右。
row-reverse ：表示沿水平方向，由右到左.
column：表示垂直方向，由上到下
column-reverse:表示垂直方向，由下到上

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理
包含三个属性值：
nowrap：表示不换行
wrap：正常换行，第一个位于第一行的第一个
wrap-reverse：向上换行，第一行位于下方

flew-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,
第一个属性值为flex-direction的属性值
第二个属性值为flex-wrap的属性值

justify-content属性用于设置项目在容器中的对齐方式。
该属性主要要五个属性值：
flex-start：默认值，左对齐
flex-end：右对齐
center：居中对齐
center：居中对齐
space-around：每个项目两侧的间距相等

align-items定义了项目在交叉轴上是如何对齐显示的
该属性主要有五个属性值：（以交叉轴从上向下为例）
flex-start:交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴居中对齐baseline 项目的第一行文字的基线对齐
stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

align-content