伸縮佈局

伸縮佈局

參考連接：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
歡迎歡迎~~~