只要一行程式碼,實現五種 CSS 經典佈局

阮一峰發表於2020-08-10

頁面佈局是樣式開發的第一步,也是 CSS 最重要的功能之一。

常用的頁面佈局,其實就那麼幾個。下面我會介紹5個經典佈局,只要掌握了它們,就能應對絕大多數常規頁面。

這幾個佈局都是自適應的,自動適配桌面裝置和移動裝置。程式碼實現很簡單,核心程式碼只有一行,有很大的學習價值,內容也很實用。

我會用到 CSS 的 Flex 語法Grid 語法,不過只用到一點點,不熟悉的朋友可以先看看教程連結,熟悉一下基本概念。每一個佈局都帶有 CodePen 示例,也可以到這個網頁統一檢視。

本文是跟極客大學合作的前端學習講座的一部分,詳見文末說明。

一、空間居中佈局

空間居中佈局指的是,不管容器的大小,專案總是佔據中心點。

CSS 程式碼如下(CodePen 示例)。


.container {
    display: grid;
    place-items: center;
} 

上面程式碼需要寫在容器上,指定為 Grid 佈局。核心程式碼是place-items屬性那一行,它是一個簡寫形式。


place-items: <align-items> <justify-items>;

align-items屬性控制垂直位置,justify-items屬性控制水平位置。這兩個屬性的值一致時,就可以合併寫成一個值。所以,place-items: center;等同於place-items: center center;

同理,左上角佈局可以寫成下面這樣。


place-items: start;

右下角佈局。


place-items: end;

二、並列式佈局

並列式佈局就是多個專案並列。

如果寬度不夠,放不下的專案就自動折行。

它的實現也很簡單。首先,容器設定成 Flex 佈局,內容居中(justify-content)可換行(flex-wrap)。


.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

然後,專案上面只用一行flex屬性就夠了(CodePen 示例)。


.item{
   flex: 0 1 150px;
   margin: 5px;
}

flex屬性是flex-growflex-shrinkflex-basis這三個屬性的簡寫形式。


flex: <flex-grow> <flex-shrink> <flex-basis>;
  • flex-basis:專案的初始寬度。
  • flex-grow:指定如果有多餘寬度,專案是否可以擴大。
  • flex-shrink:指定如果寬度不足,專案是否可以縮小。

flex: 0 1 150px;的意思就是,專案的初始寬度是150px,且不可以擴大,但是當容器寬度不足150px時,專案可以縮小。

如果寫成flex: 1 1 150px;,就表示專案始終會佔滿所有寬度。

三、兩欄式佈局

兩欄式佈局就是一個邊欄,一個主欄。

下面的實現是,邊欄始終存在,主欄根據裝置寬度,變寬或者變窄。如果希望主欄自動換到下一行,可以參考上面的"並列式佈局"。

使用 Grid,實現很容易(CodePen 示例)。


.container {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

上面程式碼中,grid-template-columns指定頁面分成兩列。第一列的寬度是minmax(150px, 25%),即最小寬度為150px,最大寬度為總寬度的25%;第二列為1fr,即所有剩餘寬度。

四、三明治佈局

三明治佈局指的是,頁面在垂直方向上,分成三部分:頁首、內容區、頁尾。

這個佈局會根據裝置寬度,自動適應,並且不管內容區有多少內容,頁尾始終在容器底部(粘性頁尾)。也就是說,這個佈局總是會佔滿整個頁面高度。

CSS 程式碼如下(CodePen 示例)。


.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

上面程式碼寫在容器上面,指定採用 Grid 佈局。核心程式碼是grid-template-rows那一行,指定垂直高度怎麼劃分,這裡是從上到下分成三部分。第一部分(頁首)和第三部分(頁尾)的高度都為auto,即本來的內容高度;第二部分(內容區)的高度為1fr,即剩餘的所有高度,這可以保證頁尾始終在容器的底部。

五、聖盃佈局

聖盃佈局是最常用的佈局,所以被比喻為聖盃。它將頁面分成五個部分,除了頁首和頁尾,內容區分成左邊欄、主欄、右邊欄。

這裡的實現是,不管頁面寬度,內容區始終分成三欄。如果寬度太窄,主欄和右邊欄會看不到。如果想將這三欄改成小螢幕自動堆疊,可以參考並列式佈局。

HTML 程式碼如下。


<div class="container">
    <header/>
    <div/>
    <main/>
    <div/>
    <footer/>
</div>

CSS 程式碼如下(CodePen 示例)。


.contariner {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

上面程式碼要寫在容器上面,指定採用 Grid 佈局。核心程式碼是grid-template屬性那一行,它是兩個屬性grid-template-rows(垂直方向)和grid-template-columns(水平方向)的簡寫形式。


grid-template: <grid-template-rows> / <grid-template-columns>

grid-template-rowsgrid-template-columns都是auto 1fr auto,就表示頁面在垂直方向和水平方向上,都分成三個部分。第一部分(頁首和左邊欄)和第三部分(頁尾和右邊欄)都是本來的內容高度(或寬度),第二部分(內容區和主欄)佔滿剩餘的高度(或寬度)。

六、參考連結

前端小課

看了上面的內容,如果你還想進一步學習更多前端知識,歡迎關注 極客大學的前端小課

前端小課除了 CSS,還講授 JavaScript,尤其是生產中用得最多的幾個框架。這次的授課老師是阿里巴巴前手淘前端團隊負責人winter,他可能是目前市場上最大牌的前端講師。

他結合自己的經驗,手把手教大家,如何從零開始自己實現一個類似 React 的簡單框架,教你領悟前端框架的原理。它是如何將所有功能封裝在一起,暴露介面,給開發者使用,並且還能支援元件。

整個前端小課是 4 天視訊課程 + 3 天實踐訓練,還有助教隨時答疑輔導、班主任每天督促 + 配套實戰作業提交,只需要 ¥9.8

點選這裡,或者手機掃描下面的二維碼就可報名。

(完)

相關文章