頁(yè)面布局是樣式開(kāi)發(fā)的第一步，也是 CSS 最重要的功能之一。

常用的頁(yè)面布局，其實(shí)就那么幾個(gè)。下面我會(huì)介紹5個(gè)經(jīng)典布局，只要掌握了它們，就能應(yīng)對(duì)絕大多數(shù)常規(guī)頁(yè)面。

這幾個(gè)布局都是自適應(yīng)的，自動(dòng)適配桌面設(shè)備和移動(dòng)設(shè)備。代碼實(shí)現(xiàn)很簡(jiǎn)單，核心代碼只有一行，有很大的學(xué)習(xí)價(jià)值，內(nèi)容也很實(shí)用。

我會(huì)用到 CSS 的?Flex 語(yǔ)法?和?Grid 語(yǔ)法，不過(guò)只用到一點(diǎn)點(diǎn)，不熟悉的朋友可以先看看教程鏈接，熟悉一下基本概念。每一個(gè)布局都帶有 碼上掘金?示例，也可以到?這個(gè)網(wǎng)頁(yè)?統(tǒng)一查看。

空間居中布局

空間居中布局指的是，不管容器的大小，項(xiàng)目總是占據(jù)中心點(diǎn)。

CSS 代碼如下（Code示例?）。

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

上面代碼需要寫(xiě)在容器上，指定為 Grid 布局。核心代碼是place-items屬性那一行，它是一個(gè)簡(jiǎn)寫(xiě)形式。

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

align-items屬性控制垂直位置，justify-items屬性控制水平位置。這兩個(gè)屬性的值一致時(shí)，就可以合并寫(xiě)成一個(gè)值。所以，place-items: center;等同于place-items: center center;。

同理，左上角布局可以寫(xiě)成下面這樣。

place-items: start;

右下角布局。

place-items: end;

并列式布局

并列式布局就是多個(gè)項(xiàng)目并列。

如果寬度不夠，放不下的項(xiàng)目就自動(dòng)折行。

它的實(shí)現(xiàn)也很簡(jiǎn)單。首先，容器設(shè)置成 Flex 布局，內(nèi)容居中（justify-content）可換行（flex-wrap）。

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

然后，項(xiàng)目上面只用一行flex屬性就夠了（Code示例）。

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

flex屬性是flex-grow、flex-shrink、flex-basis這三個(gè)屬性的簡(jiǎn)寫(xiě)形式。

flex: <flex-grow> <flex-shrink> <flex-basis>;

• flex-basis：項(xiàng)目的初始寬度。
• flex-grow：指定如果有多余寬度，項(xiàng)目是否可以擴(kuò)大。
• flex-shrink：指定如果寬度不足，項(xiàng)目是否可以縮小。

flex: 0 1 150px;的意思就是，項(xiàng)目的初始寬度是150px，且不可以擴(kuò)大，但是當(dāng)容器寬度不足150px時(shí)，項(xiàng)目可以縮小。

如果寫(xiě)成flex: 1 1 150px;，就表示項(xiàng)目始終會(huì)占滿所有寬度。

兩欄式布局

兩欄式布局就是一個(gè)邊欄，一個(gè)主欄。

下面的實(shí)現(xiàn)是，邊欄始終存在，主欄根據(jù)設(shè)備寬度，變寬或者變窄。如果希望主欄自動(dòng)換到下一行，可以參考上面的"并列式布局"。

使用 Grid，實(shí)現(xiàn)很容易（CodePen 示例）。

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

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

三明治布局

三明治布局指的是，頁(yè)面在垂直方向上，分成三部分：頁(yè)眉、內(nèi)容區(qū)、頁(yè)腳。

這個(gè)布局會(huì)根據(jù)設(shè)備寬度，自動(dòng)適應(yīng)，并且不管內(nèi)容區(qū)有多少內(nèi)容，頁(yè)腳始終在容器底部（粘性頁(yè)腳）。也就是說(shuō)，這個(gè)布局總是會(huì)占滿整個(gè)頁(yè)面高度。

CSS 代碼如下（CodePen 示例）。

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

上面代碼寫(xiě)在容器上面，指定采用 Grid 布局。核心代碼是grid-template-rows那一行，指定垂直高度怎么劃分，這里是從上到下分成三部分。第一部分（頁(yè)眉）和第三部分（頁(yè)腳）的高度都為auto，即本來(lái)的內(nèi)容高度；第二部分（內(nèi)容區(qū)）的高度為1fr，即剩余的所有高度，這可以保證頁(yè)腳始終在容器的底部。

圣杯布局

圣杯布局是最常用的布局，所以被比喻為圣杯。它將頁(yè)面分成五個(gè)部分，除了頁(yè)眉和頁(yè)腳，內(nèi)容區(qū)分成左邊欄、主欄、右邊欄。

這里的實(shí)現(xiàn)是，不管頁(yè)面寬度，內(nèi)容區(qū)始終分成三欄。如果寬度太窄，主欄和右邊欄會(huì)看不到。如果想將這三欄改成小屏幕自動(dòng)堆疊，可以參考并列式布局。

HTML 代碼如下。

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

CSS 代碼如下（CodePen 示例）。

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

上面代碼要寫(xiě)在容器上面，指定采用 Grid 布局。核心代碼是grid-template屬性那一行，它是兩個(gè)屬性grid-template-rows（垂直方向）和grid-template-columns（水平方向）的簡(jiǎn)寫(xiě)形式。

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

grid-template-rows和grid-template-columns都是auto 1fr auto，就表示頁(yè)面在垂直方向和水平方向上，都分成三個(gè)部分。第一部分（頁(yè)眉和左邊欄）和第三部分（頁(yè)腳和右邊欄）都是本來(lái)的內(nèi)容高度（或?qū)挾?#xff09;，第二部分（內(nèi)容區(qū)和主欄）占滿剩余的高度（或?qū)挾?#xff09;。

參考鏈接

• Ten modern layouts in one line of CSS
• Flex 布局教程
• Grid 布局教程
• grid-template 屬性,