伸縮佈局

參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

以前在網頁開發過程中，佈局一直是不可或缺的，從最早的表格佈局，到後來的DIV+CSS佈局，現在再到CSS3的伸縮佈局。

CSS3在佈局方面做了非常大的改進，使得我們對塊級元素的佈局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。

主軸：Flex容器的主軸主要用來配置Flex項目，預設是水平方向

側軸：與主軸垂直的軸稱作側軸，預設是垂直方向的

方向：預設主軸從左向右，側軸預設從上到下

主軸和側軸並不是固定不變的，通過flex-direction可以互換。

​

使用說明

1. 指定一個父盒子為伸縮盒子，即指定：display: flex
2. 明確你需要的主側軸方向，並設置flex-direction 預設是row ，縱向是column
3. 設置父盒子的屬性來調整子元素的佈局，例如align-items
4. 設置子盒子的寬高或者比例，完成具體的子元素在父盒子中的佈局

各個屬性介紹

1. flex-direction調整主軸方向（預設為水平方向）
2. justify-content調整主軸對齊
3. align-items調整側軸對齊（子元素可以使用align-self覆蓋）
4. flex-wrap控制是否換行
5. align-content堆棧（由flex-wrap產生的獨立行）對齊
6. flex-flow是flex-direction + flex-wrap的簡寫形式
7. flex是子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配
8. order控制子項目的排列順序，正序方式排序，從小到大

寫在最後面！！！~~

這有一些代碼關於flex
歡迎歡迎~~~