一、 讲解作业
二、z-index用于设置定位元素显示的层级
默认定位后的元素会在普通文档元素之上显示，那么如何做到让定位后的元素显示在文档的下方呢？ 设置z-index的值即可
-
Z轴概念：水平的X轴和垂直的y轴构成了一个面，而Z轴则就是垂直这个面。
-
Z-index作用：Z-index属性其作用就为设置一个定位元素沿 z 轴的位置。
-
Z-index值效果：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面:
即：Z-index如果为正数，则离用户更近，为负数则表示离用户更远。默认值为auto（有的浏览器中默认值为0），堆叠顺序与父元素相同 -
注意：Z-index 仅能在定位元素上奏效（例如 position:absolute;），z-index的值一般设置为整数。
二、 flex布局
1、 flex相关的基本概念
如果要定义父元素是一个 flex布局容器。则设置display为flex或inline-flex即可。
如果设置为flex则父元素为块状元素，设置为inline-flex父元素呈现为行内元素。而不管父元素本身是什么类型。
一旦一个元素设置为了flex类型，那么其所有的子元素都会被flex方式影响。可以称他们为flex子项。而父元素可以称为flex容器【flex container】
注意:
设为Flex布局以后，直接子元素的float、clear和vertical-align属性将失效。
2、主轴与交叉轴
一个盒子被设置为flex布局后，它默认会存在两种轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
子元素默认沿主轴排列（即默认水平排列）。
单个子元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
2、 Flex布局–设置在父元素上的属性
flex-direction 主轴的方向
它的值有( row（默认值）：主轴为水平方向，起点在左端 | row-reverse 主轴为水平方向，起点在右端| column 主轴为垂直方向，起点在上沿 | column-reverse轴为垂直方向，起点在下沿;)
3、 Flex-wrap
此属性有3个值，如下： nowrap | wrap | wrap-reverse;
4、flex-flow flex-direction/flex-wrap的简写
flex-direction属性和flex-wrap属性的简写形式
此属性有2个值，默认值为row nowrap，如下：flex-flow:row wrap; flex-flow:row nowrap;
4、justify-content flex子项在主轴上的对齐方式。
子元素水平对齐方式，在主轴上的对齐方式。（随着主轴方向的改变而改变）
此属性有5个值：flex-start | flex-end | center | space-between | space-around;
align-items flex子项在交叉轴上的对齐方式
子元素垂直对齐方式，子元素在交叉轴上如何对齐
此属性有5个值，如下：
flex-start | flex-end | center | baseline | stretch;
5个值的作用
flex-start：让子元素在交叉轴的开始处对齐。
flex-end：让子元素在交叉轴的结束处对齐。
center：让子元素在交叉轴的中点对齐。
align-content 多条主轴在交叉轴上的对齐方式
多条主轴在交叉轴上的对齐方式（多行内容垂直对齐方式） 多根主轴在交叉轴线上的对齐方式。如果项目只有一根主轴线，该属性不起作用
此属性有6个值，如下： flex-start | flex-end | center | baseline | stretch;
6个值的作用
flex-start：在交叉轴的开始处对齐。
flex-end 在交叉轴的结束处对齐。
center： 在交叉轴的中点对齐。
Flex布局–设置在子元素上的属性
order 定义子元素的排列顺序。
flex-grow 定义子元素在主轴的放大比例，前提是存在剩下空间用于放大。
该属性来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。【默认为0，表示不放大。】
flex-grow–放大说明
(1) 如果所有子元素的flex-grow属性都为相等，则将会平分父元素剩余宽度。
(2) 如果不相等，将会用父元素的宽度减去剩余未放大的子元素的宽度，剩余值将按照比例平分。
(3) flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
举个例子:
父元素宽400px，有两子元素：A和B。A宽为100px，B宽为200px。
则空余空间为 400-（100+200）= 100px。
如果A，B都不索取剩余空间，则有100px的空余空间。
如果A索取剩余空间:设置flex-grow为1，B不索取。则最终A的大小为 自身宽度（100px）+ 剩余空间的宽度（100px）= 200px
如果A，B都设索取剩余空间，A设置flex-grow为1，B设置flex-grow为2。则最终A的大小为 自身宽度（100px）+ A获得的剩余空间的宽度（100px * (1/(1+2))）,最终B的大小为 自身宽度（200px）+ B获得的剩余空间的宽度（100px * (2/(1+2))）
flex-shrink 定义了子元素的缩小比例。
前提是空间无法装下盒子大小，默认为1，即如果空间不足，该子元素将缩小。负值对该属性无效。
注意事项
- 子项可以设置高度，宽度最好用flex-basis属性设置
- 一个元素可以既是容器，又是子项，可以同时具备容器和子项的操作属性
- 容器本身可以设置浮动等，容器子项不能设置浮动定位等，但是子项的子元素又可以设置
- 使用flex布局有点类似于安卓的布局方式，先是很多行，然后每行有很多内容在进行控制