1.Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

2.设置容器，用于统一管理容器内项目布局，也就是管理项目的排列方式和对齐方式。

flex-direction 属性

通过设置坐标轴，来设置项目排列方向。

.container
{
  flex-direction: row（默认值） | row-reverse | column | column-reverse
}

row（默认值）：主轴横向，方向为从左指向右。项目沿主轴排列，从左到右排列。

row-reverse：row的反方向。主轴横向，方向为从右指向左。项目沿主轴排列，从右到左排列。

column：主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。

column-reverse：column的反方向。主轴纵向，方向从下指向上。项目沿主轴排列，从下到上排列。

flex-wrap属性

设置是否允许项目多行排列，以及多行排列时换行的方向。

nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
wrap：容器单行容不下所有项目时，换行排列。
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。