Flex---彈性佈局
前言：
最近在學習網頁的佈局，以下是我閱讀過幾篇比較好的部落格簡單的做了一個簡單總結、並簡單的嘗試了一下。希望為以後的開發有所幫助。
參考部落格：彈性佈局詳解
一、Flex佈局是什麼
Flex佈局，又稱“彈性佈局”。2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
佈局的傳統解決方案：基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。
二、基本概念
- 容器： 需要新增彈性佈局的父元素；
- 專案： 彈性佈局容器中的每一個子元素，稱為專案；
- 主軸： 在彈性佈局中，我們會通過屬性規定水平/垂直方向為主軸；
- 交叉軸： 與主軸垂直的另一方向，稱為交叉軸。
三、彈性佈局的使用
- 給父容器新增display: flex/inline-flex屬性，即可使容器內容採用彈性佈局顯示，而不遵循常規文件流的顯示方式；
- 容器新增彈性佈局後，僅僅是容器內容採用彈性佈局，而容器自身在文件流中的定位方式依然遵循常規文件流；
- display:flex; 容器新增彈性佈局後，顯示為塊級元素；
- display:inline-flex; 容器新增彈性佈局後，顯示為行級元素；
- 設為 Flex佈局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。
四、容器的6大屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
（1）flex-direction：決定主軸的方向（即專案---子元素的排列方向）
.box { flex-direction: row | row-reverse | column | column-reverse; }
row（預設值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 #div{ 8 width: 400px; 9 height: 400px; 10 background-color: yellow; 11 display: flex; 12 13 } 14 #div div{ 15 width: 100px; 16 height: 100px; 17 background-color: blue; 18 color: white; 19 font-size: 30px; 20 21 } 22 </style> 23 </head> 24 <body> 25 <div id="div"> 26 <div class="div1">1</div> 27 <div class="div2">2</div> 28 <div class="div3">3</div> 29 <div class="div4">4</div> 30 </div> 31 </body> 32 </html>View Code
1 #div{ 2 width: 400px; 3 height: 400px; 4 background-color: yellow; 5 display: flex; 6 flex-direction:row-reverse 7 } 8 #div div{ 9 width: 100px; 10 height: 100px; 11 background-color: blue; 12 color: white; 13 font-size: 30px; 14 15 }View Code
（2）flex-wrap：如果一條軸線排不下，如何換行。
- nowrap（預設）：不換行。當容器寬度不夠時，每個專案會被擠壓寬度；
- wrap： 換行，並且第一行在容器最上方；
- wrap-reverse： 換行，並且第一行在容器最下方。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 #div{ 8 width: 400px; 9 height: 400px; 10 background-color: yellow; 11 display: flex; 12 13 } 14 #div div{ 15 width: 200px; //設定寬為200px 16 height: 100px; 17 background-color: blue; 18 color: white; 19 font-size: 30px; 20 21 } 22 </style> 23 </head> 24 <body> 25 <div id="div"> 26 <div class="div1">1</div> 27 <div class="div2">2</div> 28 <div class="div3">3</div> 29 <div class="div4">4</div> 30 </div> 31 </body> 32 </html>View Code
（3）flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
（4） justify-content：定義了專案在主軸上的對齊方式。
flex-start（預設值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，專案之間的間隔都相等。space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 #div{ 8 width: 400px; 9 height: 400px; 10 background-color: yellow; 11 display: flex; 12 justify-content:flex-end; 13 } 14 #div div{ 15 width: 80px;//寬度設定為80px; 16 height: 80px; 17 background-color: blue; 18 color: white; 19 font-size: 30px; 20 21 } 22 </style> 23 </head> 24 <body> 25 <div id="div"> 26 <div class="div1">1</div> 27 <div class="div2">2</div> 28 <div class="div3">3</div> 29 <div class="div4">4</div> 30 </div> 31 </body> 32 </html>View Code
（5）align-items：定義專案（子元素）在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 專案的第一行文字的基線對齊。stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
（6）align-content：定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（預設值）：軸線佔滿整個交叉軸。
這裡就不再贅述，直接貼圖，直觀。。。
五、專案（子元素）的6大屬性
orderflex-growflex-shrinkflex-basisflexalign-self
（1）order:定義專案的排列順序。數值越小，排列越靠前，預設為0。
（2）flex-grow：定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
（3）flex-shrink：定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
（4）flex-basis：專案佔據的主軸空間。（如果主軸為水平，則設定這個屬性，相當於設定專案的寬度。 原width將會失效。）
（5）flex：flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
（6）align-self:定義單個專案自身在交叉軸上的排列方式，可以覆蓋掉容器上的align-items屬性。
屬性值：與align-items相同，預設值為auto，表示繼承父容器的align-items屬性值。
（完）