頁面佈局是樣式開發的第一步,也是 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-grow
、flex-shrink
、flex-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-rows
和grid-template-columns
都是auto 1fr auto
,就表示頁面在垂直方向和水平方向上,都分成三個部分。第一部分(頁首和左邊欄)和第三部分(頁尾和右邊欄)都是本來的內容高度(或寬度),第二部分(內容區和主欄)佔滿剩餘的高度(或寬度)。
六、參考連結
- Ten modern layouts in one line of CSS, Una Kravets
- Flex 佈局教程
- Grid 佈局教程
- grid-template 屬性, MDN
前端小課
看了上面的內容,如果你還想進一步學習更多前端知識,歡迎關注 極客大學的前端小課。
前端小課除了 CSS,還講授 JavaScript,尤其是生產中用得最多的幾個框架。這次的授課老師是阿里巴巴前手淘前端團隊負責人winter,他可能是目前市場上最大牌的前端講師。
他結合自己的經驗,手把手教大家,如何從零開始自己實現一個類似 React 的簡單框架,教你領悟前端框架的原理。它是如何將所有功能封裝在一起,暴露介面,給開發者使用,並且還能支援元件。
整個前端小課是 4 天視訊課程 + 3 天實踐訓練,還有助教隨時答疑輔導、班主任每天督促 + 配套實戰作業提交,只需要 ¥9.8 !
點選這裡,或者手機掃描下面的二維碼就可報名。
(完)