前端學習(19)~css3屬性(十二)：Flex布局圖片詳解
- 2020 年 3 月 18 日
- 筆記
CSS3中的 flex 屬性，在布局方面做了非常大的改進，使得我們對多個元素之間的布局排列變得十分靈活，適應性非常強。其強大的伸縮性和自適應性，在網頁開中可以發揮極大的作用。
flex 初體驗
我們先來看看下面這個最簡單的布局：
上面這張圖中的布局是我們都熟悉的：默認文檔流中，在一個父容器里放置多個塊級的子元素，那麼，這些子元素會默認從上往下排列。
在此基礎之上，如果我給父容器僅僅加一個 display: flex屬性，此時，這些子元素的布局會搖身一變：
沒錯，子元素們會在水平方向上，從左至右排列，就是這麼神奇。
flex 布局的優勢
1、flex 布局的子元素不會脫離文檔流，很好地遵從了「流的特性」。
但你如果用 float 來做布局，float 屬性的元素會脫離文檔流，而且會涉及到各種 BFC、清除浮動的問題。
浮動相關的問題，比較麻煩，所以也成了面試必問的經典題目。但有了 flex 布局之後，這些問題都不存在的。
2、flex 是一種現代的布局方式，是 W3C 第一次提供真正用於布局的 CSS 規範。 flex 提供了豐富的屬性，非常靈活，讓布局的實現更佳多樣化，且方便易用。
flex 唯一的缺點就在於，它不支援低版本的 IE 瀏覽器。
flex 的兼容性問題
上圖中可以看到， flex 布局不支援 IE9 及以下的版本；IE10及以上也只是部分支援。如果你的頁面不需要處理 IE瀏覽器的兼容性問題，則可以放心大膽地使用 flex 布局。
但是，比如網易新聞、淘寶這樣的大型網站，面對的是海量用戶，即便使用低版本瀏覽器的用戶比例很少，但絕對基數仍然是很龐大的。因此，這些網站為了兼容低版本的 IE 瀏覽器，暫時還不敢嘗試使用 flex 布局。
概念：彈性盒子、子元素
- 彈性盒子：指的是使用
display:flex或display:inline-flex聲明的父容器。 - 子元素/彈性元素：指的是父容器裡面的子元素們（父容器被聲明為 flex 盒子的情況下）。
概念：主軸和側軸
在上面的「初體驗」例子中，我們發現，彈性盒子裡面的子元素們，默認是從左至右排列的，這個方向，代表的就是主軸的方向。
在此，我們引入主軸和側軸的概念。
- 主軸：flex容器的主軸，默認是水平方向，從左向右。
- 側軸：與主軸垂直的軸稱作側軸，默認是垂直方向，從上往下。
PS：主軸和側軸並不是固定不變的，可以通過 flex-direction 更換方向，我們在後面會講到。
彈性盒子
聲明定義
使用 display:flex 或 display:inline-flex 聲明一個父容器為彈性盒子。此時，這個父容器里的子元素們，會遵循彈性布局。
備註：一般是用 display:flex這個屬性。
flex-direction 屬性
flex-direction：用於設置盒子中子元素的排列方向。屬性值可以是：
|
屬性值 |
描述 |
|---|---|
|
row |
從左到右水平排列子元素（默認值） |
|
column |
從上到下垂直排列子元素 |
|
row-reverse |
從右向左排列子元素 |
|
column-reverse |
從下到上垂直排列子元素 |
備註：如果我們不給父容器寫flex-direction這個屬性，那麼，子元素默認就是從左到右排列的。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #eee; font-family: "Microsoft Yahei"; font-size:22px; } h3{ font-weight: normal; } section{ width: 1000px; margin:40px auto; } ul{ background-color: #fff; border: 1px solid #ccc; } ul li{ width: 200px; height: 200px; background-color: pink; margin:10px; } section:nth-child(1) ul{ overflow: hidden; /* 清除浮動 */ } section:nth-child(1) ul li{ float: left; } /* 設置伸縮盒子*/ section:nth-child(2) ul{ display: flex; } section:nth-child(3) ul{ /* 設置伸縮布局*/ display: flex; /* 設置主軸方向*/ flex-direction: row; } section:nth-child(4) ul{ /* 設置伸縮布局*/ display: flex; /* 設置主軸方向 :水平翻轉*/ flex-direction: row-reverse; } section:nth-child(5) ul{ /* 設置伸縮布局*/ display: flex; /* 設置主軸方向 :垂直*/ flex-direction: column; } section:nth-child(6) ul{ /* 設置伸縮布局*/ display: flex; /* 設置主軸方向 :垂直*/ flex-direction: column-reverse; } </style> </head> <body> <section> <h3>傳統布局</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>伸縮布局 display:flex</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸方向 flex-direction:row</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸方向 flex-direction:row-reverse</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸方向 flex-direction:column</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸方向 flex-direction:column-reverse</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </body> </html>
flex-wrap 屬性
flex-wrap：控制子元素溢出時的換行處理。
justify-content 屬性
justify-content：控制子元素在主軸上的排列方式。
彈性元素
justify-content 屬性
justify-content: flex-start; 設置子元素在主軸上的對齊方式。屬性值可以是：
flex-start從主軸的起點對齊（默認值）flex-end從主軸的終點對齊center居中對齊space-around在父盒子里平分space-between兩端對齊 平分
程式碼演示：（在瀏覽器中打開看效果）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style:none;} body{ background-color: #eee; font-family: "Microsoft Yahei"; } section{ width: 1000px; margin:50px auto; } section h3{ font-size:22px; font-weight: normal; } ul{ border: 1px solid #999; background-color: #fff; display: flex; } ul li{ width: 200px; height: 200px; background: pink; margin:10px; } section:nth-child(1) ul{ /* 主軸對齊方式：從主軸開始的方向對齊*/ justify-content: flex-start; } section:nth-child(2) ul{ /* 主軸對齊方式：從主軸結束的方向對齊*/ justify-content: flex-end; } section:nth-child(3) ul{ /* 主軸對齊方式：居中對齊*/ justify-content: center; } section:nth-child(4) ul{ /* 主軸對齊方式：在父盒子中平分*/ justify-content: space-around; } section:nth-child(5) ul{ /* 主軸對齊方式：兩端對齊 平分*/ justify-content: space-between; } </style> </head> <body> <section> <h3>主軸的對齊方式：justify-content:flex-start</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸的對齊方式：justify-content:flex-end</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸的對齊方式：justify-content:center</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸的對齊方式：justify-content:space-round</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主軸的對齊方式：justify-content:space-bettwen</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </section> </body> </html>
效果：
align-items 屬性
align-items：設置子元素在側軸上的對齊方式。屬性值可以是： – flex-start 從側軸開始的方向對齊； – flex-end 從側軸結束的方向對齊； – baseline 基準線 默認同flex-start； – center 中間對齊 ；- stretch 拉伸；
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style:none; } body{ background-color: #eee; font-family: "Microsoft Yahei"; } section{ width: 1000px; margin:50px auto; } section h3{ font-size:22px; font-weight: normal; } ul{ border: 1px solid #999; background-color: #fff; display: flex; height:500px; } ul li{ width: 200px; height: 200px; background: pink; margin:10px; } section:nth-child(1) ul{ /* 側軸對齊方式 ：從側軸開始的方向對齊*/ align-items:flex-start; } section:nth-child(2) ul{ /* 側軸對齊方式 ：從側軸結束的方向對齊*/ align-items:flex-end; } section:nth-child(3) ul{ /* 側軸對齊方式 ：居中*/ align-items:center; } section:nth-child(4) ul{ /* 側軸對齊方式 ：基準線 默認同flex-start*/ align-items:baseline; } section:nth-child(5) ul{ /* 側軸對齊方式 ：拉伸*/ align-items:stretch; } section:nth-child(5) ul li{ height:auto; } </style> </head> <body> <section> <h3>側軸的對齊方式:align-items ：flex-start</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>側軸的對齊方式：align-items:flex-end</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>側軸的對齊方式：align-items:center</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>側軸的對齊方式：align-itmes:baseline</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>側軸的對齊方式：align-itmes: stretch</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </body> </html>
flex屬性：設置子盒子的權重
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style:none; } body{ background-color: #eee; font-family: "Microsoft Yahei"; } section{ width: 1000px; margin:50px auto; } section h3{ font-size:22px; font-weight: normal; } ul{ border: 1px solid #999; background-color: #fff; display: flex; } ul li{ width: 200px; height: 200px; background: pink; margin:10px; } section:nth-child(1) ul li:nth-child(1){ flex:1; } section:nth-child(1) ul li:nth-child(2){ flex:1; } section:nth-child(1) ul li:nth-child(3){ flex:8; } section:nth-child(2) ul li:nth-child(1){ } section:nth-child(2) ul li:nth-child(2){ flex:1; } section:nth-child(2) ul li:nth-child(3){ flex:4; } </style> </head> <body> <section> <h3>伸縮比例:flex</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>伸縮比例:flex</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </body> </html>
