flex布局，即為彈性布局，其為盒模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。
eg：.box{
display：flex；
行內元素也可以使用flex布局。
注意：設定flex布局後，子元素的float、clear和vertical-align屬性將會失效。
採用flex布局：
元素：稱為flex容器，他的所有子元素自動成為容器成員，稱為flex專案，
容器預設存在兩根軸，水平的主軸（main axis）和垂直的交叉軸（cross axis）主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；
同理也存在cross start和cross end；
專案沿主軸排列單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size；
一、容器的屬性：
1.flex-direction：決定主軸的方向
row：主軸為水平方向，起點在左側；
row-reverse：。。。。。。起點在右側；
column：主軸為垂直方向，起點在上沿；
column-reverse：。。。。起點在下沿；
2.flex-wrap：預設所有專案排列在一條軸線上，而該屬性是定義如果一條軸線排不下，如何進行換行
nowrap：不換行；
wrap：換行，第一行再上方；
wrap-reverse：換行，第一行在下方；
3.flex-flow：是-direction和-wrap的縮寫
預設值為： row nowrap；
4.justify-cotent：定義了專案在主軸上的對齊方式
flex-start：左對齊；
flex-end：右對齊；
center：居中對齊；
space-between：兩端對齊，專案之間間隔等距；
space-around：每個專案兩側等間隔，所以專案間的間隔要比專案和邊框的間隔大；
5.align-items：定義專案在交叉軸的對齊方式
flex-start：交叉軸的起點對齊；
flex-end：交叉軸的終點對齊；
center：交叉軸的中點對齊；
baseline：專案的第一行文字的基線對齊；
stretch預設值：如果專案未設定高度或者設定為auto，將佔滿整個容器的高度；
6.align-cotent：定義了多根軸線的對齊方式，如果專案只有一根軸線則該屬性無效
flex-start：與交叉軸的起點對齊；
flex-end：與交叉軸的終點對齊；
center：。。中點。。；
space-between：與交叉軸兩端對齊，軸線之間的間隔等距；
space-around：每根軸線的兩側距離相等，所以軸線之間的距離比邊框與軸線之間的距離大一倍；
stretch預設值：軸線佔滿整個交叉軸；
二、專案的屬性
1.order：定義專案的排列順序，數值越小，排列越靠前，預設為0；
2.flex-grow：定義專案的放大比例，預設為0，即如果存在剩餘空間也不能放大；
3.flex-shrink：定義專案的縮小比例，即空間不足，該專案將縮小；
4.flex-basis：在分配的多餘空間之前，專案佔據主軸的空間，瀏覽器根據此屬性計算主軸是否有多餘空間，預設為auto，即為專案本來的大小；
5.flex：是-grow、-shrink、basis的縮寫，預設值為0，1，auto，該屬性有兩個快捷值，auto（1，1，auto）和none（0,0，auto）；
6.align-self：允許單個專案與其他專案不一樣的對齊方式，可覆蓋align-items屬性，預設值為auto，表示繼承父元素的align-items，如無父元素則等同於stretch，該屬性除了auto值外，其餘的屬性含義等同於align-items；
flex布局學習筆記
布局的傳統解決方案，基於盒狀模型，依賴display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局 flex flexible box 的縮寫，彈性布局，任何乙個容器都可以指定為...
Flex布局學習筆記
flex 是flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。webkit 核心的瀏覽器，必須加上 webkit字首。注意，設為 flex 布局以後，子元素的float clear和vert...
flex布局 學習筆記
一 講解作業 二 z index用於設定定位元素顯示的層級 預設定位後的元素會在普通文件元素之上顯示，那麼如何做到讓定位後的元素顯示在文件的下方呢？設定z index的值即可 z軸概念 水平的x軸和垂直的y軸構成了乙個面，而z軸則就是垂直這個面。z index作用 z index屬性其作用就為設定乙...