只要一行程式碼，實現五種 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-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 ！

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

（完）

相關文章