只要一行代碼，實現(xiàn)五種 CSS 經(jīng)典布局

時間：2023-09-09 00:00:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-09 00:00:02 來源：網(wǎng)站運(yùn)營

只要一行代碼，實現(xiàn)五種 CSS 經(jīng)典布局：頁面布局是樣式開發(fā)的第一步，也是 CSS 最重要的功能之一。







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

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

一、空間居中布局

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







CSS 代碼如下

.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;

二、并列式布局

并列式布局就是多個項目并列。







如果寬度不夠，放不下的項目就自動折行。













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

.container { display: flex; flex-wrap: wrap; justify-content: center;}然后，項目上面只用一行flex屬性就夠了

.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：指定如果有多余寬度，項目是否可以擴(kuò)大。?flex-shrink：指定如果寬度不足，項目是否可以縮小。

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

如果寫成flex: 1 1 150px;，就表示項目始終會占滿所有寬度。

三、兩欄式布局

兩欄式布局就是一個邊欄，一個主欄。







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







使用 Grid，實現(xiàn)很容易

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

四、三明治布局

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







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







CSS 代碼如下

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

五、圣杯布局

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







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







HTML 代碼如下。

<div class="container"> <header/> <div/> <main/> <div/> <footer/></div>CSS 代碼如

.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，就表示頁面在垂直方向和水平方向上，都分成三個部分。第一部分（頁眉和左邊欄）和第三部分（頁腳和右邊欄）都是本來的內(nèi)容高度（或?qū)挾龋?，第二部分（?nèi)容區(qū)和主欄）占滿剩余的高度（或?qū)挾龋?br>



微信搜索【前端小學(xué)弟】