初語：
傳統的前端佈局一直是令人頭疼的，positon定位的常用屬性relative、absolute、fixed、static、inherit功能已經挺強大了。
- relative:相對定位，這個屬性是要配合left、right、top、bottom使用，不然沒有效果，跟正常沒加positon的一模一樣。
- absolute：絕對定位，元素標籤會根據父容器，進行定位，默認位於父元素的左上角（不添加left、right等屬性）。
- fixed：絕對定位，元素標籤會根據瀏覽器窗口進行定位。
- static：元素正常出現在標籤流中，而且不能通過top、bottom等方位屬性定位。原本不加定位的效果保持，且不能改變。
- inherit：從父容器繼承接管position屬性
flex佈局：
1）概述：
雖然position屬性很強大，但是操作起來挺麻煩的，尤其在於要求子元素等距離間隔，均勻分佈時，flex表現更爲出色。2009年推出的flex佈局現在已經得到了幾乎所有的瀏覽器的支持，完整、簡潔響應的完成頁面的佈局，dispaly:flex就能讓容器變爲彈性盒子，具有極大的靈活性。
2）使用：
.box{
display: -webkit-flex; /*在webkit內核的瀏覽器上使用要加前綴*/
display: flex; //將對象作爲彈性伸縮盒顯示
}
行內元素也可以使用Flex佈局
注意：flex的父容器，其子容器的float（浮動）、clear、vertical-align（垂直居中）失效。
3）圖解：
橙色區域：父容器即彈性容器
灰藍色區域：子容器
彈性容器兩根主軸：默認的水平方向主軸(main axis)和垂直方向交叉軸(cross axis)
main start/main end：主軸開始位置/結束位置
彈性容器屬性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1）flex-direction：row | row-reverse | column | column-reverse;
2）flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap：不換行，若容器內子元素超出父容器寬度，則縮小子容器的寬度達到不換行效果。
- wrap：換行，保持子容器的原來尺寸，折到第二行排列。
- wrap-reverse：換行且翻轉排列
3）flex-flow: row nowrap;
簡便寫法，默認值爲row nowrap，不做解釋了。
4）justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊項目之間的間隔都相等
space-around：每個項目兩側的間隔相等
5）align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start：靠頂部
- flex-end：靠底部
- center：垂直居中（常用）
- baseline：子容器的第一行文字基準線對齊
- stretch：子容器無高度或者height爲auto即默認高度填滿父容器
6）align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start：與交叉軸的起點對齊
- flex-end：與交叉軸的終點對齊
- center：與交叉軸的中點對齊
- space-between：與交叉軸兩端對齊則軸線之間的間隔平均分佈
- space-around：每根軸線兩側的間隔都相等
- stretch（默認值）：軸線佔滿整個交叉軸
項目屬性:
-
order
-
flex-grow
-
flex-shrink
-
flex-basis
-
flex
-
align-self
1）order：通過數值大小排序（默認0）越小排名靠前
2）flex-grow：默認值0，當子容器沒有佔滿父容器，即父容器有剩餘空間，也不會放大填滿父容器；當子容器中值都爲1時，子容器平分父容器空間；當有一個子容器A爲2，其餘爲1，則A佔據父容器的空間是其餘的2倍，注意justify-content屬性會失效。
3）flex-shrink：定義子容器縮小比例，默認值1，當所有子項目爲1，父容器空間不足時，所有項目均縮小，若一個值爲0時，空間不足不縮小。
4）flex-basis：默認值auto，根據剩餘空間方法縮小，若一個容器A當值爲1時且父容器空間充足，A的寬度固定的設置值，若父容器沒有多餘的寬度，容器也會跟着縮小。
寄語：
學習的過程中留下點滴記錄其實挺不錯的，多動手敲敲就會明白了，我笨所以我這樣，希望能幫助到大家，資源學習都是來自網絡，靈感以及寫作思路來自於阮一峯的前端語法篇，感謝大佬！
聯繫
🐧企鵝：184820911