一、flex简要概念
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出
二、display：flex 在父项添加的属性值
1.、flex-direction: 决定主轴的方向(即项目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
默认值：row，主轴为水平方向，起点在左端。默认情况下是从左往右。（1 2 3 4）
row-reverse：主轴为水平方向，起点在右端（4 3 2 1）
1947912-20200228233441848-2127970770.png
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
2.png
2、flex-wrap: 决定容器内项目是否可换行。
默认情况下，项目都排在主轴线上，使用 flex-wrap 可实现项目的换行。
flex-wrap: nowrap | wrap | wrap-reverse;
默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
wrap：项目主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse：换行，第一行在下方
3.png
3、 justify-content：定义了项目在主轴的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
默认值: flex-start 左对齐
flex-end：右对齐
4.png
center：居中
5.png
space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
6.png
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
7.png
4、 align-items: 定义了项目在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度
假设容器高度设置为 100px，而项目都没有设置高度的情况下，则项目的高度也为 100px。
8.png
flex-start：交叉轴的起点对齐
假设容器高度设置为 100px，而项目分别为 20px, 40px, 60px, 80px, 100px, 则如上图显示。
10.png
flex-end：交叉轴的终点对齐
13.png
9.png
center：交叉轴的中点对齐
12.png
