上一篇文章介紹了Flex佈局的語法,今天介紹常見佈局的Flex寫法。
你會看到,不管是什麼佈局,Flex往往都可以幾行命令搞定。
我只列出程式碼,詳細的語法解釋請查閱《Flex佈局教程:語法篇》。我的主要參考資料是Landon Schropp的文章和Solved by Flexbox。
一、骰子的佈局
骰子的一面,最多可以放置9個點。
下面,就來看看Flex如何實現,從1個點到9個點的佈局。你可以到codepen檢視Demo。
如果不加說明,本節的HTML模板一律如下。
1 2 3 |
<div class="box"> <span class="item"></span> </div> |
上面程式碼中,div元素(代表骰子的一個面)是Flex容器,span元素(代表一個點)是Flex專案。如果有多個專案,就要新增多個span元素,以此類推。
1.1 單專案
首先,只有左上角1個點的情況。Flex佈局預設就是首行左對齊,所以一行程式碼就夠了。
1 2 3 |
.box { display: flex; } |
設定專案的對齊方式,就能實現居中對齊和右對齊。
1 2 3 4 |
.box { display: flex; justify-content: center; } |
1 2 3 4 |
.box { display: flex; justify-content: flex-end; } |
設定交叉軸對齊方式,可以垂直移動主軸。
1 2 3 4 |
.box { display: flex; align-items: center; } |
1 2 3 4 5 |
.box { display: flex; justify-content: center; align-items: center; } |
1 2 3 4 5 |
.box { display: flex; justify-content: center; align-items: flex-end; } |
1 2 3 4 5 |
.box { display: flex; justify-content: flex-end; align-items: flex-end; } |
1.2 雙專案
1 2 3 4 |
.box { display: flex; justify-content: space-between; } |
1 2 3 4 5 |
.box { display: flex; flex-direction: column; justify-content: space-between; } |
1 2 3 4 5 6 |
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } |
1 2 3 4 5 6 |
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } |
1 2 3 4 5 6 7 |
.box { display: flex; } .item:nth-child(2) { align-self: center; } |
1 2 3 4 5 6 7 8 |
.box { display: flex; justify-content: space-between; } .item:nth-child(2) { align-self: flex-end; } |
1.3 三專案
1 2 3 4 5 6 7 8 9 10 11 |
.box { display: flex; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; } |
1.4 四專案
1 2 3 4 5 6 |
.box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between; } |
HTML程式碼如下。
1 2 3 4 5 6 7 8 9 10 |
<div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> |
CSS程式碼如下。
1 2 3 4 5 6 7 8 9 10 11 |
.box { display: flex; flex-wrap: wrap; align-content: space-between; } .column { flex-basis: 100%; display: flex; justify-content: space-between; } |
1.17 六專案:首行排滿,尾行排滿
1 2 3 4 5 |
.box { display: flex; flex-wrap: wrap; align-content: space-between; } |
1.5 六專案
1 2 3 4 5 6 |
.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; } |
HTML程式碼如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div> </div> |
CSS程式碼如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.box { display: flex; flex-wrap: wrap; } .row{ flex-basis: 100%; display:flex; } .row:nth-child(2){ justify-content: center; } .row:nth-child(3){ justify-content: space-between; } |
1.5 九專案
1 2 3 4 |
.box { display: flex; flex-wrap: wrap; } |
二、網格佈局
2.1 基本網格佈局
最簡單的網格佈局,就是平均分佈。在容器裡面平均分配空間,跟上面的骰子佈局很像,但是需要設定專案的自動縮放。
HTML程式碼如下。
1 2 3 4 5 |
<div class="Grid"> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> </div> |
CSS程式碼如下。
1 2 3 4 5 6 7 |
.Grid { display: flex; } .Grid-cell { flex: 1; } |
2.2 百分比佈局
某個網格的寬度為固定的百分比,其餘網格平均分配剩餘的空間。
HTML程式碼如下。
1 2 3 4 5 |
<div class="Grid"> <div class="Grid-cell u-1of4">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell u-1of3">...</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.Grid { display: flex; } .Grid-cell { flex: 1; } .Grid-cell.u-full { flex: 0 0 100%; } .Grid-cell.u-1of2 { flex: 0 0 50%; } .Grid-cell.u-1of3 { flex: 0 0 33.3333%; } .Grid-cell.u-1of4 { flex: 0 0 25%; } |
三、聖盃佈局
聖盃佈局(Holy Grail Layout)指的是一種最常見的網站佈局。頁面從上到下,分成三個部分:頭部(header),軀幹(body),尾部(footer)。其中軀幹又水平分成三欄,從左到右為:導航、主欄、副欄。
HTML程式碼如下。
1 2 3 4 5 6 7 8 9 |
<body class="HolyGrail"> <header>...</header> <div class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </div> <footer>...</footer> </body> |
CSS程式碼如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.HolyGrail { display: flex; min-height: 100vh; flex-direction: column; } header, footer { flex: 1; } .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; } .HolyGrail-nav, .HolyGrail-ads { /* 兩個邊欄的寬度設為12em */ flex: 0 0 12em; } .HolyGrail-nav { /* 導航放到最左邊 */ order: -1; } |
如果是小螢幕,軀幹的三欄自動變為垂直疊加。
1 2 3 4 5 6 7 8 9 10 11 |
@media (max-width: 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; } } |
四、輸入框的佈局
我們常常需要在輸入框的前方新增提示,後方新增按鈕。
HTML程式碼如下。
1 2 3 4 5 |
<div class="InputAddOn"> <span class="InputAddOn-item">...</span> <input class="InputAddOn-field"> <button class="InputAddOn-item">...</button> </div> |
CSS程式碼如下。
1 2 3 4 5 6 7 |
.InputAddOn { display: flex; } .InputAddOn-field { flex: 1; } |
五、懸掛式佈局
有時,主欄的左側或右側,需要新增一個圖片欄。
HTML程式碼如下。
1 2 3 4 |
<div class="Media"> <img class="Media-figure" src="" alt=""> <p class="Media-body">...</p> </div> |
CSS程式碼如下。
1 2 3 4 5 6 7 8 9 10 11 12 |
.Media { display: flex; align-items: flex-start; } .Media-figure { margin-right: 1em; } .Media-body { flex: 1; } |
六、固定的底欄
有時,頁面內容太少,無法佔滿一屏的高度,底欄就會抬高到頁面的中間。這時可以採用Flex佈局,讓底欄總是出現在頁面的底部。
HTML程式碼如下。
1 2 3 4 5 |
<body class="Site"> <header>...</header> <main class="Site-content">...</main> <footer>...</footer> </body> |
CSS程式碼如下。
1 2 3 4 5 6 7 8 9 |
.Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; } |