彈性盒子(靈活佈局)詳解
傳統佈局——基於盒子模型，依賴 display 屬性、position屬性、float屬性。
它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。
並且，傳統佈局程式碼冗長，出錯率高，要時刻注意清除浮動或者在進行絕對定位時給父元素新增相對定位。否則就容易造成頁面佈局混亂。
但是，Flex佈局就就可以避免這種情況：
Flex是Flexible Box的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex佈局。
注意，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性都將失效!!!
那麼如何實現Flex佈局，它可以幫助我們實現什麼效果呢
容器屬性：
1. flex-direction屬性：決定主軸的方向（即專案的排列方向）;
2. flex-wrap屬性：規定如果一條軸線排不下，如何換行；
3. flex-flow屬性：是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row/nowrap；
4. justify-content屬性：定義了專案在主軸上的對齊方式；
5. align-items屬性：定義專案在交叉軸上如何對齊；
6. align-content屬性：定義了多根軸線的對齊方式；
容器屬性具體實現效果：
一、flex-direction屬性：決定主軸的方向（即專案的排列方向）。
- row（預設值）：主軸為水平方向，起點在左端；
- row-reverse：主軸為水平方向，起點在右端；
- column：主軸為垂直方向，起點在上沿；
- column-reverse：主軸為垂直方向，起點在下沿。
程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } #box { display: flex;/*flex-direction: row; //水平方向，起點在左端; flex-direction: row-reverse; //水平方向，起點在右端; flex-direction: column; //垂直方向，起點在上沿; flex-direction: column-reverse;//垂直方向，起點在下沿。 */ } #div1, #div2, #div3 { width: 300px; height: 200px; } #div1 { background-color: #859aff; } #div2 { background-color: #9d4c48; } #div3 { background-color: #58a429; } </style> <title>彈性盒子</title> </head> <body> <div id="box"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div> </body> </html>
二、flex-wrap屬性：
預設情況下，專案都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
- nowrap（預設）：不換行；
- wrap：換行，第一行在上方；
- wrap-reverse：換行，第一行在下方。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } #box { display: flex; /*flex-wrap: nowrap; //不換行; flex-wrap: wrap; //換行，第一行在上方; flex-wrap: wrap-reverse; //換行，第一行在下方。*/ } #div1, #div2, #div3,#div4,#div5,#div6 { width: 300px; height: 200px; } #div1 { background-color: #859aff; } #div2 { background-color: #9d4c48; } #div3 { background-color: #58a429; } #div4 { background-color: #16a497; } #div5 { background-color: #a44166; } #div6 { background-color: #1ca460; } </style> <title>彈性盒子</title> </head> <body> <div id="box"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div> </div> </body> </html>
三、flex-flow屬性：
是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
四、justify-content屬性：定義了專案在主軸上的對齊方式。
- flex-start（預設值）：左對齊；
- flex-end：右對齊；
- center： 居中；
- space-between：兩端對齊，專案之間的間隔都相等；
- space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } #box { display: flex; /*justify-content: flex-start; //左對齊; justify-content: flex-end; //右對齊; justify-content: center; //居中; justify-content: space-between; //兩端對齊，專案之間的間隔都相等; justify-content: space-around; //每個專案兩側的間隔相等。 */ } #div1, #div2, #div3,#div4,#div5,#div6 { width: 300px; height: 200px; } #div1 { background-color: #859aff; } #div2 { background-color: #9d4c48; } #div3 { background-color: #58a429; } #div4 { background-color: #16a497; } #div5 { background-color: #a44166; } #div6 { background-color: #1ca460; } </style> <title>彈性盒子</title> </head> <body> <div id="box"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div> </div> </body> </html>
五、align-items屬性：定義專案在交叉軸上如何對齊。
- flex-start：交叉軸的起點對齊；
- flex-end：交叉軸的終點對齊；
- center：與交叉軸的中點對齊；
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈；
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍；
- stretch（預設值）：軸線佔滿整個交叉軸。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } #box { display: flex; align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch; } #div1, #div2, #div3, #div4, #div5, #div6 { width: 300px; height: 200px; } #div1 { background-color: #859aff; } #div2 { background-color: #9d4c48; } #div3 { background-color: #58a429; } #div4 { background-color: #16a497; } #div5 { background-color: #a44166; } #div6 { background-color: #1ca460; } </style> <title>彈性盒子</title> </head> <body> <div id="box"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div> </div> </body> </html>
原文連結：https://blog.csdn.net/wyhstars/article/details/78442728
傳統佈局——基於盒子模型，依賴 display 屬性、position屬性、float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。並且，傳統佈局程式碼冗長，出錯率高，要時刻注意清除浮動或者在進行絕對定位時給父元素新增相對定位。否則就容易造成頁面佈局混亂。
但是，Flex佈局就就可以避免這種情況：Flex是Flexible Box的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex佈局。
注意，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性都將失效!!!那麼如何實現Flex佈局，它可以幫助我們實現什麼效果呢
容器屬性：
1. flex-direction屬性：決定主軸的方向（即專案的排列方向）;2. flex-wrap屬性：規定如果一條軸線排不下，如何換行；3. flex-flow屬性：是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row/nowrap；4. justify-content屬性：定義了專案在主軸上的對齊方式；5. align-items屬性：定義專案在交叉軸上如何對齊；6. align-content屬性：定義了多根軸線的對齊方式；
容器屬性具體實現效果：
一、flex-direction屬性：決定主軸的方向（即專案的排列方向）。
- row（預設值）：主軸為水平方向，起點在左端；- row-reverse：主軸為水平方向，起點在右端；- column：主軸為垂直方向，起點在上沿；- column-reverse：主軸為垂直方向，起點在下沿。
程式碼如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; }
#box { display: flex; /*flex-direction: row; //水平方向，起點在左端; flex-direction: row-reverse; //水平方向，起點在右端; flex-direction: column; //垂直方向，起點在上沿; flex-direction: column-reverse;//垂直方向，起點在下沿。 */ }
#div1, #div2, #div3 { width: 300px; height: 200px; }
#div1 { background-color: #859aff; }
#div2 { background-color: #9d4c48; }
#div3 { background-color: #58a429; } </style> <title>彈性盒子</title></head><body><div id="box"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div></div></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546二、flex-wrap屬性：預設情況下，專案都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
- nowrap（預設）：不換行；- wrap：換行，第一行在上方；- wrap-reverse：換行，第一行在下方。
程式碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; }
#box { display: flex; /*flex-wrap: nowrap; //不換行; flex-wrap: wrap; //換行，第一行在上方; flex-wrap: wrap-reverse; //換行，第一行在下方。*/
}
#div1, #div2, #div3,#div4,#div5,#div6 { width: 300px; height: 200px; }
#div1 { background-color: #859aff; }
#div2 { background-color: #9d4c48; }
#div3 { background-color: #58a429; }
#div4 { background-color: #16a497; }
#div5 { background-color: #a44166; }
#div6 { background-color: #1ca460; } </style> <title>彈性盒子</title></head><body><div id="box"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div></div></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061三、flex-flow屬性：是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
四、justify-content屬性：定義了專案在主軸上的對齊方式。
- flex-start（預設值）：左對齊；- flex-end：右對齊；- center： 居中；- space-between：兩端對齊，專案之間的間隔都相等；- space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
程式碼如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; }
#box { display: flex; /*justify-content: flex-start; //左對齊; justify-content: flex-end; //右對齊; justify-content: center; //居中; justify-content: space-between; //兩端對齊，專案之間的間隔都相等; justify-content: space-around; //每個專案兩側的間隔相等。*/
}
#div1, #div2, #div3,#div4,#div5,#div6 { width: 300px; height: 200px; }
#div1 { background-color: #859aff; }
#div2 { background-color: #9d4c48; }
#div3 { background-color: #58a429; }
#div4 { background-color: #16a497; }
#div5 { background-color: #a44166; }
#div6 { background-color: #1ca460; } </style> <title>彈性盒子</title></head><body><div id="box"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div></div></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263五、align-items屬性：定義專案在交叉軸上如何對齊。
- flex-start：交叉軸的起點對齊；- flex-end：交叉軸的終點對齊；- center：與交叉軸的中點對齊；- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈；- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍；- stretch（預設值）：軸線佔滿整個交叉軸。
程式碼如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; }
#box { display: flex; align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch; }
#div1, #div2, #div3, #div4, #div5, #div6 { width: 300px; height: 200px; }
#div1 { background-color: #859aff; }
#div2 { background-color: #9d4c48; }
#div3 { background-color: #58a429; }
#div4 { background-color: #16a497; }
#div5 { background-color: #a44166; }
#div6 { background-color: #1ca460; } </style> <title>彈性盒子</title></head><body><div id="box"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div></div></body></html>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
————————————————版權宣告：本文為CSDN博主「wyhstars」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。原文連結：https://blog.csdn.net/wyhstars/article/details/78442728