20.3.彈性布局flex · HTML+CSS學習筆記

## 20.3.1.基本概念彈性布局是指，可以設定一個容器盒子中的若干個（數量可變的）子盒子，在父盒子中的橫向或縱向有序整齊排列。其典型應用就是頁面中的導航布局的實現，如下圖所示： ![](https://img.kancloud.cn/20/b9/20b93f16d5fd78e4e3ca03d82b6af5c0_571x43.png) 彈性布局的實現，主要是在父盒子（容器盒子）上定義相應的屬性，則其內部的子盒子就能夠按照所定義的樣式進行顯示。 ## 20.3.2.主要屬性彈性布局的主要屬性設置包括如下幾個： * display: flex; 說明：設置盒子的顯示模式為彈性盒模型，即該盒子成為了彈性盒模式的容器盒子。 * flex-direction: 說明：設置彈性盒模式的子盒子的排列方式，有如下4個方式（4個屬性值）： row：橫向排列， row-reverse：橫向排列，但順序反向 column：縱向排列 column-reverse：縱向排列，但順序反響 * flex-wrap：說明：設置彈性盒模式的子盒子超出時的換行特性，常用屬性值有： nowrap：不換行，盡量在一行顯示，這是默認值。此時有可能會超出父盒子（當子盒子有最小寬度設置時）。 wrap：自動換行。 wrap-reverse：換行，但反向顯示（即其實顯示到上一行去了） * justify-content： ![](https://img.kancloud.cn/0f/89/0f89a32eb1bf43f2e77211032d64c80e_719x229.png) 說明：設置子盒子的主軸方向的一行中的排布方式。所謂主軸就是由flex-direction所決定的方向為主軸，對應另一個方向為輔軸。假如flex-direction為row或row-reverse，則橫向為主軸，縱向為輔軸。假如flex-direction為column或column-reverse，則縱向為主軸，橫向為輔軸。常用屬性值有： flex-start：子盒子從所設定的起始位置開始排列出來，空隙留后面； flex-end：子盒子從所設定的終止位置開始排列出來，空隙留前面； center：子盒子完全從居中的位置開始排列出來，空隙留兩邊； space-between：子盒子兩邊緊靠父盒子，空隙留在相互的中間且均等； space-around：子盒子均衡布置，分布給每個盒子的空隙都一樣。圖示如下： ![](https://img.kancloud.cn/d6/18/d6183f341c2bc14d3a50ff993387870d_739x328.png) 兩個重要概念：主軸，輔軸 ![](https://img.kancloud.cn/98/56/98565587c3a03943d1289a590cf4a687_618x184.png) ![](https://img.kancloud.cn/1e/1a/1e1af52896caf52721210276dcfbc43b_722x235.png) * align-content：說明：設置子盒子在輔軸方向的排布方式，大于一行且輔軸有多余空間時時才有效。常用的屬性值有： flex-start：子盒子從所設定的起始位置開始排列出來，空隙留后面； flex-end：子盒子從所設定的終止位置開始排列出來，空隙留前面； center：子盒子完全從居中的位置開始排列出來，空隙留兩邊； space-between：子盒子兩邊僅靠父盒子，空隙留在相互的中間； space-around：子盒子均衡布置，空隙均衡出現；圖示如下： ![](https://img.kancloud.cn/e8/28/e828052e8d68a8ead0a7d698702c861e_1024x768.png) * align-items： ![](https://img.kancloud.cn/10/27/102720d3e71509922ce86f3169c373f5_720x234.png) 說明：設置子盒子在當前行中輔軸方向的對齊方式。 flex-start：子盒子定位于所設定的起始位置，空隙留后面； flex-end：子盒子定位于設定的終止位置，空隙留前面； center：子盒子定位于居中的位置，空隙留兩邊； baseline：子盒子定位于基準位置； stretch：子盒子進行拉伸（充滿縱軸）； ![](https://img.kancloud.cn/ab/52/ab52c0651114276b36b33350850ce46a_692x722.png) ## 20.3.3.應用案例實現類似如下網頁效果的版面布局： ![](https://img.kancloud.cn/4d/ae/4daec6db5a0785ebc52117873b3f6fed_767x239.png) 代碼如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; color:black; list-style: none; } .page{ width:90%; min-width:600px; border:solid 1px red; margin:0 auto; } nav ul{ display: flex; justify-content:space-between; background: gray; margin:2px 0; } nav ul li{ background: purple; } .body{ display: flex; } .body>.left, .body>.right{ width:200px; background: yellow; } .body>.center{ background: pink; border:solid 1px blue; margin:0 15px; /*這就是關鍵所在！！！*/ width:100%; } .body>.center>.c2, .body>.center>.c4 { display: flex; justify-content:space-between; } .body>.center>.c2>div{ width:49%; border:solid 1px green; } .body>.center>.c4>div{ width:32.5%; background: orange; } </style> </head> <body> <div class="page"> <header>頭部</header> <nav> <ul> <li>首頁</li> <li>關于我們</li> <li>新聞公告新聞公告</li> <li>產品介紹</li> <li>客戶服務</li> </ul> </nav> <div class="body"> <div class="left">左</div> <div class="center"> <div class="c1">中間1</div> <div class="c2"> <div>c2a</div> <div>c2b</div> </div> <div class="c3">中間2</div> <div class="c4"> <div>c4a</div> <div>c4b</div> <div>c4c</div> </div> <div class="c5">中間3</div> </div> <div class="right">右</div> </div> <footer>底部</footer> </div> </body> </html> ```