flex布局

Z-index
用于设置了定位元素显示的层级
默认定位后的元素会在普通文档元素之上显示，那么如何做到让定位元素显示在文档的下方呢？设置Z-index的值即可。

1. Z轴概念：水平的X轴和垂直的y轴构成了一个面，而Z轴则就是垂直这个面。

2. Z-index作用：Z-index属性其作用就为设置一个定位元素沿 z 轴的位置。

3. Z-index值效果：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面:
   即：Z-index如果为正数，则离用户更近，为负数则表示离用户更远。默认值为auto（有的浏览器中默认值为0），堆叠顺序与父元素相同

4. 注意：Z-index 仅能在定位元素上奏效（例如 position:absolute;），z-index的值一般设置为整数。

Flex布局
只有子元素会失效，但子元素的子项不会。
Flex-相关基本概念
基本概念：
如果要定义父元素是一个 flex布局容器。则设置display为flex或inline-flex即可。
如果设置为flex则父元素为块状元素，设置为inline-flex父元素呈现为行内元素。而不管父元素本身是什么类型。
一旦一个元素设置为了flex类型，那么其所有的子元素都会被flex方式影响。可以称他们为flex子项。而父元素可以称为flex容器【flex container】
注意:
设为Flex布局以后，直接子元素的float、clear和vertical-align属性将失效。
主轴和交叉轴

1. 一个盒子被设置为flex布局后，它默认会存在两种轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
2. 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
3. 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
4. 子元素默认沿主轴排列（即默认水平排列）。
5. 单个子元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex布局—设置在父元素上的属性：
Flex-direction主轴的方向 / Flex-wrap flex子项是否换行 / flex-flow flex-direction/flex-wrap的简写 / justify-content flex子项在主轴上的对齐方式/ align-items flex子项在交叉轴上的对齐方式 / align-content 多条主轴在交叉轴上的对齐方式
Flex布局—设置在子元素上的属性：
align-content 多条主轴在交叉轴上的对齐方式 / flex-grow 定义子元素在主轴的放大比例，前提是存在剩下空间用于放大 / flex-shrink 定义了子元素的缩小比例 / flex-basis 定义了在分配多余空间之前，子元素占据的主轴空间 / flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写 / align-self 控制单个元素在交叉轴上的对齐方式