CSS樣式經典布局

五種 CSS 經典布局

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

這幾個布局都是自適應的，自動適配桌面設備和移動設備。代碼實現很簡單，核心代碼只有一行。

我會用到 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
• http://www.ruanyifeng.com/blog/