实现flex布局

mian{
  display: flex;
  //行内元素 display: inline-flex;
}

控制主轴方向

flex-direction
---row（默认值）：主轴为水平方向，起点在左端。
---row-reverse：主轴为水平方向，起点在右端。
---column：主轴为垂直方向，起点在上沿。
---column-reverse：主轴为垂直方向，起点在下沿。

控制换行

flex-wrap
---nowrap（默认）：不换行
---wrap：换行，第一行在上方
---wrap-reverse：换行，第一行在下方

在主轴上的对齐方式

justify-content
---flex-start（默认值）：左对齐
---flex-end：右对齐
---center： 居中
---space-between：两端对齐，元素之间的间隔都相等。
---space-around：每个原色两侧的间隔相等。

在交叉轴上的对齐方式

align-items
---flex-start：交叉轴的起点对齐。
---flex-end：交叉轴的终点对齐。
---center：交叉轴的中点对齐。
---baseline: 项目的第一行文字的基线对齐。
---stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

元素的放大比例

默认为0即不放大
flex-grow

元素的缩小比例

默认为1
flex-shrink

设置单个元素有与其他元素不一样的对齐方式

align-self
---flex-start：交叉轴的起点对齐。
---flex-end：交叉轴的终点对齐。
---center：交叉轴的中点对齐。
---baseline: 项目的第一行文字的基线对齐。
---stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。