頁面佈局是樣式開發的第一步，也是 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 示例）。

.container {
    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 ！

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

（完）