一、 講解作業
二、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布局有點類似於安卓的布局方式，先是很多行，然後每行有很多內容在進行控制
flex布局學習筆記
布局的傳統解決方案，基於盒狀模型，依賴display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局 flex flexible box 的縮寫，彈性布局，任何乙個容器都可以指定為...
Flex布局學習筆記
flex 是flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。webkit 核心的瀏覽器，必須加上 webkit字首。注意，設為 flex 布局以後，子元素的float clear和vert...
flex布局學習筆記
flex布局是什麼？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局 box webkit核心的瀏覽器，必須加上 webkit字首。box 基本概念採用flex布局的元素，稱為flex容器 flex container 簡...