1. Flex布局基础知识
⑴ Flex弹性布局。任何一个HTML元素都可以指定为flex布局。
Display:inline-flex; flex容器是内联块元素
Display:flex；flex容器是块级元素
⑵ flex容器：采用flex布局的元素称为flex容器。
⑶ Flex项目：flex容器的所有子元素自动成为容器成员，称为flex项目。
⑷ 默认情况下，水平方向的是主轴，垂直于主轴方向的轴就是交叉轴。
Flex项目默认沿着主轴起始排列。
2. flex容器的属性
//1.flex-directon属性
// 决定主轴的方向（即flex项目的排列方向）
// flex-direction: row;(默认值，主轴为水平方向，起点在左端)
// flex-direction: row-reverse;(主轴为水平方向，起点在右端)
// flex-direction: column;(主轴为垂直方向，起点在上沿)
// flex-direction: column-reverse;(主轴为垂直方向，起点在下沿)
//2.flex-wrap属性
//默认情况下，flex项目都排列在一条轴线上
// flex-wrap:nowrap;(默认不换行)
// flex-wrap:wrap;(换行，第一行在上方，也就是从上往下排)
// flex-wrap:wrap-reverse;(换行，第一行在下方，也就是从下往上排)
//3.flex-flow
// flex-directon和flex-wrap的简写形式
// flex-flow:<flex-directon>||<flex-wrap>;(默认值为row nowrap)
//4.justify-content
// 定义了flex项目在主轴上的对齐方式
// justify-content：flex-start;(默认值，左对齐（flex-direction: row）)
// justify-content：flex-end;(默认值，右对齐（flex-direction: row-reverse）)
// justify-content: center;(水平居中)
// justify-content: space-between;(两端对齐，flex项目之间的间隔都相等)
// justify-content: space-around;(每个flex项目两侧的间隔都相等，
// 所以，项目之间的间隔比边框的间隔大一倍)
//5.align-items
// 定义了flex项目在交叉轴上的对齐方式
// align-items：stretch;(默认值，若flex项目未设置交叉轴方向（高度）的大小或者设为auto，将占满整个容器交叉轴方向的大小)
//align-items：flex-start;(交叉轴的起点对齐)
//align-items：flex-end;(交叉轴的终点对齐)
//align-items：center;(交叉轴的中点对齐，垂直居中)
//align-items：baseline;(flex项目的第一行文字的基线对齐)
//6.align-content
//定义了存在多根主轴线时，flex项目在交叉轴上如何对齐
// 如果项目只有一根主轴线，该属性不起作用
// align-content：stretch；(默认值，主轴线平分flex容器交叉轴方向上的 空间)
// align-content：flex-start;(交叉轴的起点对齐)
// align-content：flex-end;(交叉轴的终点对齐)
// align-content：center;(交叉轴的中点对齐，整体垂直居中)
// align-content：space-between;(flex项目之间的间隔都相等)
// align-content：space-around;(每个flex项目两侧的间隔都相等
// 所以，项目之间的间隔比边框的间隔大一倍)
3. Flex项目的属性
① order
定义了flex项目的排列顺序，数值越小，排列越靠前，默认为0
② flex-grow
定义了flex项目在主轴方向上的放大比例，默认为0， 即如果存在剩余空间，该项目也不放大。若所有项目的flex-grow属性都为1，则它们将等分剩余空间（有的话）；若所有项目的flex-grow属性都为2，其他项目是1， 则前者占据的剩余空间将比其他项多一倍；若有的flex项目有flex-grow属性，有的没有，但有width属性，则有flex-grow属性的项目将等分剩余空间
③ flex-shrink
定义了flex项目在主轴方向上的缩小比例，默认为1，即如果空间不足，该项目讲缩小。若所有项目的flex-grow属性都不为0，当空间不足时，都将等比例缩小；若一个项目的flex-grow属性为0，其他项目为1，当空间不足时，,前者不缩小
④ flex-basis
定义了在分配多余空间之前，flex项目占据的主轴大小（main size），浏览器根据这个属性，计算主轴是否有多余的空间，默认值为auto，项目本来大小。
⑤ flex
flex-grow和flex-shrink和flex-basis的简写。
flex：<flex-grow>||<flex-shrink>||<flex-basis>;
该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）
⑥ align-self
允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性。