歡迎光臨
每天分享高質量文章

Flex 佈局教程:實體篇

作者:阮一峰的網路日誌

網址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

點選“閱讀原文”可檢視本文網頁版


介紹了Flex佈局的語法,今天介紹常見佈局的Flex寫法。

你會看到,不管是什麼佈局,Flex往往都可以幾行命令搞定。

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

一、骰子的佈局

骰子的一面,最多可以放置9個點。

下麵,就來看看Flex如何實現,從1個點到9個點的佈局。你可以到codepen檢視Demo。

如果不加說明,本節的HTML模板一律如下。

上面程式碼中,div元素(代表骰子的一個面)是Flex容器,span元素(代表一個點)是Flex專案。如果有多個專案,就要新增多個span元素,以此類推。

1.1 單專案

首先,只有左上角1個點的情況。Flex佈局預設就是首行左對齊,所以一行程式碼就夠了。

.box {

display: flex;

}

設定專案的對齊方式,就能實現居中對齊和右對齊。

.box {

display: flex;

justify-content: center;

}

.box {

display: flex;

justify-content: flex-end;

}

設定交叉軸對齊方式,可以垂直移動主軸。

.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程式碼如下。

CSS程式碼如下。

.box {

display: flex;

flex-wrap: wrap;

align-content: space-between;

}

.column {

flex-basis: 100%;

display: flex;

justify-content: space-between;

}

1.17 六專案:首行排滿,尾行排滿

.box {

display: flex;

flex-wrap: wrap;

align-content: space-between;

}

1.5 六專案

.box {

display: flex;

flex-direction: column;

flex-wrap: wrap;

align-content: space-between;

}

HTML程式碼如下。

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.5 九專案

.box {

display: flex;

flex-wrap: wrap;

}

二、網格佈局

2.1 基本網格佈局

最簡單的網格佈局,就是平均分佈。在容器裡面平均分配空間,跟上面的骰子佈局很像,但是需要設定專案的自動縮放。

HTML程式碼如下。

CSS程式碼如下。

.Grid {

display: flex;

}

.Grid-cell {

flex: 1;

}

2.2 百分比佈局

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

HTML程式碼如下。

.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)指的是一種最常見的網站佈局。頁面從上到下,分成三個部分:頭部(essay-header),軀幹(body),尾部(footer)。其中軀幹又水平分成三欄,從左到右為:導航、主欄、副欄。

HTML程式碼如下。

CSS程式碼如下。

.HolyGrail {

display: flex;

min-height: 100vh;

flex-direction: column;

}

essay-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;

}

}

四、輸入框的佈局

我們常常需要在輸入框的前方新增提示,後方新增按鈕。

HTML程式碼如下。

CSS程式碼如下。

.InputAddOn {

display: flex;

}

.InputAddOn-field {

flex: 1;

}

五、懸掛式佈局

有時,主欄的左側或右側,需要新增一個圖片欄。

HTML程式碼如下。

CSS程式碼如下。

.Media {

display: flex;

align-items: flex-start;

}

.Media-figure {

margin-right: 1em;

}

.Media-body {

flex: 1;

}

六、固定的底欄

有時,頁面內容太少,無法佔滿一屏的高度,底欄就會抬高到頁面的中間。這時可以採用Flex佈局,讓底欄總是出現在頁面的底部。

HTML程式碼如下。

CSS程式碼如下。

.Site {

display: flex;

min-height: 100vh;

flex-direction: column;

}

.Site-content {

flex: 1;

}

贊(0)

分享創造快樂