flex佈局實例demo全解

時間 2019-11-22

標籤 flex 佈局實例 demo 欄目 Flex 简体版

原文原文鏈接

上篇文章介紹了Flex佈局的語法，今天介紹常見佈局的Flex寫法。css

你會看到，無論是什麼佈局，Flex每每均可以幾行命令搞定。html

我只列出代碼，詳細的語法解釋請查閱《Flex佈局教程：語法篇》。個人主要參考資料是Landon Schropp的文章和Solved by Flexbox。git

1、骰子的佈局

骰子的一面，最多能夠放置9個點。github

下面，就來看看Flex如何實現，從1個點到9個點的佈局。你能夠到codepen查看Demo。web

若是不加說明，本節的HTML模板一概以下。ide

<div class="box"> <span class="item"></span> </div>

上面代碼中，div元素（表明骰子的一個面）是Flex容器，span元素（表明一個點）是Flex項目。若是有多個項目，就要添加多個span元素，以此類推。佈局

1.1 單項目

首先，只有左上角1個點的狀況。Flex佈局默認就是首行左對齊，因此一行代碼就夠了。flex

.box { display: flex; }

設置項目的對齊方式，就能實現居中對齊和右對齊。網站

.box { display: flex; justify-content: center; }

.box { display: flex; justify-content: flex-end; }

設置交叉軸對齊方式，能夠垂直移動主軸。flexbox

.box { display: flex; align-items: center; }

.box { display: flex; justify-content: center; align-items: center; }

.box { display: flex; justify-content: center; align-items: flex-end; }

.box { display: flex; justify-content: flex-end; align-items: flex-end; }

1.2 雙項目

.box { display: flex; justify-content: space-between; }

.box { display: flex; flex-direction: column; justify-content: space-between; }

.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }

.box { display: flex; } .item:nth-child(2) { align-self: center; }

.box { display: flex; justify-content: space-between; } .item:nth-child(2) { align-self: flex-end; }

1.3 三項目

.box { display: flex; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; }

1.4 四項目

.box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between; }

HTML代碼以下。

<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代碼以下。

.box { display: flex; flex-wrap: wrap; align-content: space-between; } .column { flex-basis: 100%; display: flex; justify-content: space-between; }

1.5 六項目

.box { display: flex; flex-wrap: wrap; align-content: space-between; }

.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; }

HTML代碼以下。

<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代碼以下。

.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.6 九項目

.box { display: flex; flex-wrap: wrap; }

2、網格佈局

2.1 基本網格佈局

最簡單的網格佈局，就是平均分佈。在容器裏面平均分配空間，跟上面的骰子佈局很像，可是須要設置項目的自動縮放。

HTML代碼以下。

<div class="Grid"> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> </div>

CSS代碼以下。

.Grid { display: flex; } .Grid-cell { flex: 1; }

2.2 百分比佈局

某個網格的寬度爲固定的百分比，其他網格平均分配剩餘的空間。

HTML代碼以下。

<div class="Grid"> <div class="Grid-cell u-1of4">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell u-1of3">...</div> </div>

.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%; }

3、聖盃佈局

聖盃佈局（Holy Grail Layout）指的是一種最多見的網站佈局。頁面從上到下，分紅三個部分：頭部（header），軀幹（body），尾部（footer）。其中軀幹又水平分紅三欄，從左到右爲：導航、主欄、副欄。

HTML代碼以下。

<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代碼以下。

.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; }

若是是小屏幕，軀幹的三欄自動變爲垂直疊加。

@media (max-width: 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; } }

4、輸入框的佈局

咱們經常須要在輸入框的前方添加提示，後方添加按鈕。

HTML代碼以下。

<div class="InputAddOn"> <span class="InputAddOn-item">...</span> <input class="InputAddOn-field"> <button class="InputAddOn-item">...</button> </div>

CSS代碼以下。

.InputAddOn { display: flex; } .InputAddOn-field { flex: 1; }

5、懸掛式佈局

有時，主欄的左側或右側，須要添加一個圖片欄。

HTML代碼以下。

<div class="Media"> <img class="Media-figure" src="" alt=""> <p class="Media-body">...</p> </div>

CSS代碼以下。

.Media { display: flex; align-items: flex-start; } .Media-figure { margin-right: 1em; } .Media-body { flex: 1; }

6、固定的底欄

有時，頁面內容太少，沒法佔滿一屏的高度，底欄就會擡高到頁面的中間。這時能夠採用Flex佈局，讓底欄老是出如今頁面的底部。

HTML代碼以下。

<body class="Site"> <header>...</header> <main class="Site-content">...</main> <footer>...</footer> </body>

CSS代碼以下。

.Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; }

七，流式佈局

每行的項目數固定，會自動分行。

CSS的寫法。

.parent { width: 200px; height: 150px; background-color: black; display: flex; flex-flow: row wrap; align-content: flex-start; } .child { box-sizing: border-box; background-color: white; flex: 0 0 25%; height: 50px; border: 1px solid red; }

（完）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。