一、 講解作業
二、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佈局

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，即如果空間不足，該子元素將縮小。負值對該屬性無效。
注意事項

1. 子項可以設定高度，寬度最好用flex-basis屬性設定
2. 一個元素可以既是容器，又是子項，可以同時具備容器和子項的操作屬性
3. 容器本身可以設定浮動等，容器子項不能設定浮動定位等，但是子項的子元素又可以設定
4. 使用flex佈局有點類似於安卓的佈局方式，先是很多行，然後每行有很多內容在進行控制