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的反方向。主轴纵向，方向从下指向上。项目沿主轴排列，从下到上排列。
设置是否允许项目多行排列，以及多行排列时换行的方向。
nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
wrap：容器单行容不下所有项目时，换行排列。
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。