認識彈性布局
彈性布局就是使用Flex來進行布局，這是CSS3的一種新的布局方式，相較於浮動布局以及定位布局，彈性布局在開發效率以及維護性上都遠勝與前兩者。
Flex全稱為Flexible Box，因此也被稱之為彈性盒子。
學習彈性布局最主要的還是要由兩個方面入手
彈性盒子
彈性元素
彈性盒子即是被設置成display:fiex;的盒子元素，而彈性元素則是指被彈性盒子包裹的元素，一個大的彈性盒子中可以包含多個小的彈性盒子。
我們可以控制彈性盒子中彈性元素的排列方式，也可以單獨的為彈性元素進行區域的划分，排列方式的改變等等，總之來說就是非常方便，非常牛逼。
彈性盒子
我們可以使用display:flex;以及display:inline-flex;來聲明一個元素為彈性盒子。
flex的彈性盒子其實是獨占一行的。相當於block塊元素，默認其中的彈性元素全部變為inline-block狀態。而
inline-flex的彈性盒子並非類似block塊元素，而是類似於inline-block內聯塊級元素，默認其中的彈性元素全部變為inline-block狀態。
flex盒子本身：類似於
block塊元素獨占一行彈性元素：全部變為
inline-block內聯塊級元素
inline-flex盒子本身：類似於
inline-block內聯塊級元素，不會獨占一行彈性元素：全部變為
inline-block內聯塊級元素
flex盒子本身，紅色區域，獨占一行。
盒子元素，藍色區域，由原本的block狀態變為類似於inline-block狀態
inline-flex盒子本身，紅色區域，不獨占一行
盒子元素，藍色區域，由原本的block狀態變為類似於inline-block狀態
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ /* display: flex; */ display: inline-flex; background-color: red; } main div{ background: blueviolet content-box; box-sizing: border-box; padding: 5px; } </style> </head> <body> <main> <div>小豬佩奇</div> <div>光頭強</div> <div>喜羊羊</div> </main> </body> </html>
flex-direction 排列方式
我們可以在彈性盒子中設置flex-direction來控制盒子內部彈性元素的排列方式。
| 值 | 描述 |
|---|---|
| row | 從左到右水平排列元素（默認值） |
| row-reverse | 從右向左水平排列元素 |
| column | 從上到下垂直排列元素 |
| column-reverse | 從下到上垂直排列元素 |
默認值：row
從右到左水平排列：row-reverse
從上到下垂直排列：column
從下到上垂直排列：column-reverse
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ /* flex-direction: row; */ /* flex-direction: row-reverse; */ /* flex-direction: column; */ flex-direction: column-reverse; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>小豬佩奇</div> <div>光頭強</div> <div>喜羊羊</div> </main> </body> </html>
flex-wrap 是否換行
當彈性盒子中的彈性元素太多時，我們可以使用flex-wrap來規定彈性元素是否換行顯示，因為默認的話它不會進行換行，而是去擠壓內部的彈性元素。
並且，我們還可以指定是否反向換行。
| 選項 | 說明 |
|---|---|
| nowrap | 元素不拆行或不拆列（默認值） |
| wrap | 容器元素在必要的時候拆行或拆列。 |
| wrap-reverse | 容器元素在必要的時候拆行或拆列，但是以相反的順序 |
水平方向row排列與不換行nowrap（默認）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-direction: row; flex-wrap: nowrap; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
水平方向row排列與換行wrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-direction: row; flex-wrap: wrap; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
水平方向row排列與反向換行wrap-reverse
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-direction: row; flex-wrap: wrap-reverse; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
垂直方向column排列與不換行nowrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-direction: column; flex-wrap: nowrap; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
垂直方向column排列與換行wrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-direction: column; flex-wrap: wrap; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
垂直方向column排列與反向換行wrap-reverse
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-direction: column; flex-wrap: wrap-reverse; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
簡寫 flex-flow
flex-flow 是 flex-direction 與 flex-wrap 的組合簡寫模式，即排列方式與是否換行。
我們來嘗試一下，垂直column排列與反向換行wrap-reverse
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ display: flex; border: 2px solid blue; width: 180px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: column wrap-reverse; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
認識軸
其實我們的彈性元素排列都是依靠軸來進行的，對於flex-flow:row wrap;來說內部彈性元素如果沒換行就只有一條水平主軸，如果換行了還會增加一條垂直交叉軸。
對於flex-flow:column wrap;來說內部彈性元素如果沒換行就只有一條垂直主軸，如果換行了還會增加一條水平交叉軸。
這里一定要區分清楚交叉軸和主軸，它是根據彈性盒子定義的元素排列方式不同而發生變化的，並非一成不變的。如果排列方式是row-reverse或者column-reverse的話兩條軸的開始和結束位置也會發生變化。
justify-content 主軸多行
該方法是用於控制彈性元素在主軸上的排列方式，一定要注意！是主軸的排列方式！
| 選項 | 說明 |
|---|---|
| flex-start | 彈性元素排列從主軸起始點開始 |
| flex-end | 彈性元素排列從主軸結束點開始 |
| center | 彈性元素排列從彈性盒子中心點開始 |
| space-between | 第一個元素靠起點，最后一個元素靠終點，余下元素平均分配空間 |
| space-around | 每個元素兩側的間隔相等，所以，項目之間的間隔比項目與邊框的間隔大一倍 |
| space-evenly | 元素間距離平均分配 |
水平方向row排列，從水平主軸終點開始flex-end排列元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 260px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; justify-content: flex-end; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
水平方向row排列，從水平主軸中點開始center排列元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { padding: 100px; } main { display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; justify-content: center; } main div { background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
水平方向row排列，對水平主軸進行space-between排列划分
第一個元素靠起點，最后一個元素靠終點，余下元素平均分配空間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; justify-content: space-between; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
水平方向row排列，對水平主軸進行space-around排列划分
每個元素兩側的間隔相等，所以，項目之間的間隔比項目與邊框的間隔大一倍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; justify-content: space-around; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
水平方向row排列，對水平主軸進行space-evenly排列划分
元素間距離平均分配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; justify-content: space-evenly; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
垂直方向column排列，對垂直主軸進行space-evenly排列划分
元素間距離平均分配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 180px; height: 310px; /* 注意，要在彈性盒子中使用 */ flex-flow: column wrap; justify-content: space-evenly; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
align-items 交叉軸單行
用於控制單行彈性元素在交叉軸上的排列方式。
| 選項 | 說明 |
|---|---|
| stretch | 元素被拉伸以適應容器（默認值） |
| center | 元素位於容器的中心 |
| flex-start | 元素位於容器的交叉軸開頭 |
| flex-end | 元素位於容器的交叉軸結尾 |
如果設置了
width | height | min-height | min-width | max-width | max-height，將影響stretch的結果，因為stretch優先級低於寬高設置。
水平方向row排列，垂直交叉軸設置stretch拉伸元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 自動拉伸寬度以及高度，但是由於設置了寬度所以只能拉伸高度 */ align-items: stretch; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; /* 取消高度設置，這會影響 align-items: stretch; 使其不生效*/ /* height: 50px; */ } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
水平方向row排列，對齊到垂直交叉軸的頂部flex-start
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
水平方向row排列，對齊到垂直交叉軸的底部flex-end
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸底部*/ align-items: flex-end; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
水平方向row排列，對齊到垂直交叉軸的中心點center
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸中心點*/ align-items: center; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
垂直方向column排列，對齊到水平交叉軸的中心點center
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 180px; height: 310px; /* 注意，要在彈性盒子中使用 */ flex-flow: column wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到水平交叉軸中心點*/ align-items: center; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </main> </body> </html>
align-content 交叉軸多行
用於控制多行彈性元素在交叉軸上的排列方式。其實這個非常重要！
| stretch | 將空間平均分配給元素 |
|---|---|
| flex-start | 元素緊靠主軸起點 |
| flex-end | 元素緊靠主軸終點 |
| center | 元素從彈性容器中心開始 |
| space-between | 第一個元素靠起點，最后一個元素靠終點，余下元素平均分配空間 |
| space-around | 每個元素兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍 |
| space-evenly | 元素間距離平均分配 |
為什么說這個重要呢？比如下圖如果產生多行彈性元素，那么它的排列方式就會亂掉,我們使用的是align-items，它只管一排，多出來的不會管。
此時，我們只需要將它改為align-content即可完美解決，可以看到換行后的元素不會亂跑。
水平方向row排列，對齊到垂直交叉軸的頂部flex-start
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-content: flex-start; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
水平方向row排列，對齊到垂直交叉軸的底部flex-end
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸底部*/ align-content: flex-end; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
水平方向row排列，對齊到垂直交叉軸的中心點center
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸中心點*/ align-content: center; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </main> </body> </html>
此外，還有space-between ，space-around ，space-evenly沒有進行演示，可以參照一下just-content
彈性元素
放在彈性盒子中的元素即為彈性元素，它有以下三點需要注意：
彈性元素本身變為
inline-block內聯塊級元素不能使用
float與clear規則絕對定位的彈性元素不參與彈性布局中
其實說白了，任何脫離普通文檔流的元素，都不能參與到彈性布局之中。
我們學習彈性元素前一定牢記一點，彈性盒子中的所有設置均是對其下所有的彈性元素生效，而彈性元素的所有設置則只是對自己本身生效。
align-self 交叉軸自身
用於控制單個元素在交叉軸上的排列方式，注意區分align-items與align-content，這兩個都是控制所有彈性元素，而align-self只控制自己。
注意，如果你設置了
align-content就不要設置align-self了，因為優先級比不過
| 選項 | 說明 |
|---|---|
| stretch | 將空間平均分配給元素 |
| flex-start | 元素緊靠主軸起點 |
| flex-end | 元素緊靠主軸終點 |
| center | 元素從彈性容器中心開始 |
可以看到，下圖中元素1設置了align-self:flex-start;所以是依照垂直交叉軸的頂部進行排列，而元素2和3則是設置了align-self:flex-end;依照垂直交叉軸的底部進行排列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸底部*/ align-items: flex-end; } main div:first-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 對齊到垂直交叉軸頂部*/ align-self: flex-start; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; height: 50px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
flex-grow 增加自身可用空間
用於將彈性盒子的可用空間，分配給彈性元素。可以使用整數或小數聲明。
下例中為三個<div>彈性元素設置了1、3、6 ，即將總體寬度310px分成10等份，然后再按照1、3、6的比例進行分配。
盒子總寬度 / (元素1占比+元素2占比+元素3占比) * 要算的元素占比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; /* height: 180px; */ /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; } main div:first-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 十份占一份 */ flex-grow: 1; } main div:nth-of-type(2){ /* 注意，要在自身彈性元素中使用 */ /* 十份占三份 */ flex-grow: 3; } main div:last-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 十份占六份 */ flex-grow: 6; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; /* width: 50px; height: 50px; */ } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
如果彈性元素設置了寬度，將把(彈性盒子-彈性元素寬度和)后按照 flex-grow 進行分配 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; /* height: 180px; */ /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; } main div:first-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 十份占一份 */ flex-grow: 1; } main div:nth-of-type(2){ /* 注意，要在自身彈性元素中使用 */ /* 十份占三份 */ flex-grow: 3; } main div:last-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 十份占六份 */ flex-grow: 6; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 50px; /* height: 50px; */ } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
flex-shrink 縮小自身可用空間
與 flex-grow 相反 flex-shrink 是在彈性盒子裝不下元素時定義的縮小值。
注意：要取消換行，才能進行縮小，否則就直接換行了。
溢出的總寬度 / (元素1寬度*元素1比例+元素2寬度*元素2比例+元素3寬度*元素3比例)*要算的元素比例*要算的元素寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; /* height: 180px; */ /* 注意，要在彈性盒子中使用 */ /* 要取消換行，才能進行縮小，否則就直接換行了。 */ /* flex-flow: row wrap; */ /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; } main div:first-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 十份占一份 */ flex-shrink: 1; } main div:nth-of-type(2){ /* 注意，要在自身彈性元素中使用 */ /* 十份占三份 */ flex-shrink: 3; } main div:last-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 十份占六份 */ flex-shrink: 6; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 150px; /* height: 50px; */ } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
flex-basis 基准尺寸
基准尺寸指的是我們可以對單個彈性元素設置其占據主軸空間的比例，對於水平主軸來說則是設置寬度，對於垂直主軸來說則是設置高度。我們可以使用flex-basis進行設置，單位可以是%，也可以是px。
但是使用它需要注意一點，對於該項設置來說它的優先級是小於max-height以及max-width的，但是大於height和width。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; /* height: 180px; */ /* 注意，要在彈性盒子中使用 */ /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; } main div:first-of-type{ /* 注意，要在自身彈性元素中使用 */ flex-basis: 20%; } main div:nth-of-type(2){ /* 注意，要在自身彈性元素中使用 */ flex-basis: 20%; } main div:last-of-type{ /* 注意，要在自身彈性元素中使用 */ flex-basis: 60%; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 150px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
簡寫 flex
flex是flex-grow以及flex-shrink還有flex-basis的簡寫模式。
即：放大比例，縮小比例，主軸基准尺寸占比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; /* height: 180px; */ /* 注意，要在彈性盒子中使用 */ /* 要取消換行，才能進行縮小，否則就直接換行了。 */ /* flex-flow: row wrap; */ /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; } main div:first-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 放大尺寸：1 縮小尺寸0 主軸基准尺寸10% */ flex:1 0 10% } main div:nth-of-type(2){ /* 注意，要在自身彈性元素中使用 */ /* 放大尺寸：3 縮小尺寸1 主軸基准尺寸50% */ flex:3 1 50%; } main div:last-of-type{ /* 注意，要在自身彈性元素中使用 */ /* 放大尺寸：6 縮小尺寸2 主軸基准尺寸30% */ flex: 6 2 30%; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; /* width優先級小於flex-basis */ width: 150px; /* height: 50px; */ } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
order 元素排序優先級
默認的order是0，我們可以設置order來對元素進行隨心所欲的排序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; /* height: 180px; */ /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; } main div:first-of-type{ /* 注意，要在自身彈性元素中使用 */ order: 3; } main div:nth-of-type(2){ /* 注意，要在自身彈性元素中使用 */ order: 1; } main div:last-of-type{ /* 注意，要在自身彈性元素中使用 */ order: 2; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 150px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
彈性文本
文本節點也在彈性布局操作范圍內。即使它沒有任何標簽，但是在彈性布局中你仍然可以將它當做被包裹上了一套虛擬的標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; height: 180px; /* 注意，要在彈性盒子中使用 */ flex-flow: row wrap; /* 平均分配空間 */ justify-content: space-between; /* 對齊到垂直交叉軸頂部*/ align-items: center; } main div{ background: blueviolet content-box; color: white; font-size: 10px; box-sizing: border-box; padding: 5px; width: 150px; height: 50px; /* 彈性元素也可以是彈性盒子，這里我們將其內部的文本節點居中 */ display: flex; align-items: center; justify-content: center; } </style> </head> <body> <main> <!-- 文字也很聽從彈性盒子定下的規則 --> 文字：1 <div>2</div> 文字：3 </main> </body> </html>
絕對定位
由於絕對定位不會留下文檔流的空間位，故其他的彈性元素並不會感知它的距離存在。
一言蔽之，絕對定位的元素不參與進彈性布局中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 100px; } main{ display: flex; border: 2px solid blue; width: 310px; /* height: 180px; */ /* 注意，要在彈性盒子中使用 */ /* 平均分配空間 */ justify-content: space-evenly; /* 對齊到垂直交叉軸頂部*/ align-items: flex-start; /* 內部絕對定位元素依照main元素為偏移參照 */ position: relative; } main div:first-of-type{ position: absolute; top: 50px; } main div{ background: blueviolet content-box; color: white; font-size: 10px; line-height: 3em; text-align: center; box-sizing: border-box; padding: 5px; width: 150px; } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> </main> </body> </html>
自動空間
在彈性布局中，對彈性元素使用margin-right:auto;等形式可以自動撐開余下的空間。如下這個案例，我們是水平排列方式，要將滑稽頭像放在最右邊，但是對於滑稽這個彈性元素來說沒有那種能夠將自己放在水平主軸結束位置的選項。
所以我們可以對左邊的<ul>彈性元素使用margin-right:auto;來進行自動將右邊撐開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style-type: none; } header{ width: 60%; margin: 0 auto; display: flex; box-shadow: 0 0 5px rgba(0, 0, 0, .2); background: #f3f3f3; margin-top:20px ; flex-direction: row; justify-content: flex-start; align-items: center; } header ul{ display: flex; justify-content: space-between; align-content: center; /* 自動撐開 */ margin-right: auto; } header ul li{ margin-left: 10px; } img{ width: 40px; background-color:darkviolet; border-radius: 50%; margin-right: 10px; } </style> </head> <body> <header> <ul> <li>主頁</li> <li>我的關注</li> <li>我的文章</li> <li>我的好友</li> </ul> <img src="./huaji.png" alt=""> </header> </body> </html>
我們也可以對<header>的水平主軸進行justify-content:space-between;的設置，讓這兩個彈性元素一個在水平主軸開始位置，一個在水平主軸結束位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style-type: none; } header{ width: 60%; margin: 0 auto; display: flex; box-shadow: 0 0 5px rgba(0, 0, 0, .2); background: #f3f3f3; margin-top:20px ; flex-direction: row; /* 一個在開始位置，一個在結束位置 */ justify-content: space-between; align-items: center; } header ul{ display: flex; justify-content: space-between; align-content: center; } header ul li{ margin-left: 10px; } img{ width: 40px; background-color:darkviolet; border-radius: 50%; margin-right: 10px; } </style> </head> <body> <header> <ul> <li>主頁</li> <li>我的關注</li> <li>我的文章</li> <li>我的好友</li> </ul> <img src="./huaji.png" alt=""> </header> </body> </html>
微信布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-size: 20px; font-weight: 550; } ul{ list-style: none; } body{ height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: space-between; } header{ background-color: #eee; display: flex; justify-content: flex-start; border-bottom: #ccc 1px solid; align-items: center; } header span{ padding: 10px; } header :nth-child(2){ margin-right:auto; } main{ /* 內容區自動撐開 */ background-color: #eee; flex: 1; display: flex; flex-direction: column; overflow: auto; } main ul{ display: flex; flex-direction: column; height: 100%; } main ul li{ margin:10px; display: flex; align-items: center; } main ul li:last-of-type{ align-self: flex-end; } main ul li span{ margin: 4px; padding: .5em; border: 1px solid #ccc; } main ul li img{ width: 40px; background-color: green; border-radius: 10%; } footer{ display: flex; align-items: center; justify-content: space-around; border-top: 1px solid #ddd; height: 3em; padding-bottom: .6em; background-color: #eee; } footer section img{ width: 30px; } footer section:nth-of-type(2){ background-color:#fff; border-radius: 5%; flex-basis: 60%; height: 30px; } </style> </head> <body> <header> <span><</span> <span>貼吧滑稽哥</span> <span>...</span> </header> <main> <ul> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><img src="./huaji.png" alt=""><span>老哥，今天上網不?</span></li> <li><span>可以啊,搞起</span><img src="./mjg.png" alt=""></li> </ul> </main> <footer> <section><img src="./語音.png" alt=""></section> <section></section> <section><img src="./表情.png" alt=""></section> <section><img src="./加號.png" alt=""></section> </footer> </body> </html>