WEB前端開(kāi)發(fā)社區(qū) 2022-07-28 18:00 發(fā)表于湖南

現(xiàn)代 CSS 布局使開(kāi)發(fā)人員只需按幾下鍵就可以編寫(xiě)十分有意義且強(qiáng)大的樣式規(guī)則。上面的討論和接下來(lái)的帖文研究了 10 種強(qiáng)大的 CSS 布局，它們實(shí)現(xiàn)了一些非凡的工作。

01. 超級(jí)居中：place-items: center

對(duì)于第一個(gè)“單行”布局，讓我們解決所有 CSS 領(lǐng)域中最大的謎團(tuán)：居中。我想讓您知道，使用 place-items: center 會(huì)讓此操作比您想象的容易。

首先指定 grid 作為 display 方法，然后在同一個(gè)元素上寫(xiě)入 place-items: center。place-items 是同時(shí)設(shè)置 align-items 和 justify-items 的快速方法。通過(guò)將其設(shè)置為 center ， align-items 和 justify-items 都將設(shè)置為 center。

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

這使得內(nèi)容能夠在父級(jí)內(nèi)完美居中，而不管內(nèi)部大小。

02. 解構(gòu)煎餅式布局：flex: <grow> <shrink> <baseWidth>

接下來(lái)我們有解構(gòu)的煎餅！這是營(yíng)銷網(wǎng)站的常見(jiàn)布局，例如，可能有一行 3 個(gè)項(xiàng)目，通常帶有圖像、標(biāo)題，然后是一些描述產(chǎn)品某些功能的文本。在移動(dòng)設(shè)備上，我們希望它們能夠很好地堆疊，并隨著我們?cè)黾悠聊怀叽缍鴶U(kuò)展。

通過(guò)使用 Flexbox 實(shí)現(xiàn)此效果，您不需要在屏幕尺寸發(fā)生變化時(shí)通過(guò)媒體查詢來(lái)調(diào)整這些元素的位置。

flex 簡(jiǎn)寫(xiě)代表：flex: <flex-grow> <flex-shrink> <flex-basis> 。

正因?yàn)槿绱?，如果您想讓您的框填充到它們?nbsp;<flex-basis> 大小，縮小到更小的尺寸，但不拉伸以填充任何額外的空間，請(qǐng)寫(xiě)入：flex: 0 1 <flex-basis> 。在這種情況下，您的 <flex-basis> 是 150px，所以應(yīng)該是這樣：

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

如果您確實(shí)希望框在換到下一行時(shí)拉伸并填充空間，請(qǐng)將 <flex-grow> 設(shè)置為 1 ，所以應(yīng)該是這樣：

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

現(xiàn)在，當(dāng)您增加或減少屏幕尺寸時(shí)，這些 flex 項(xiàng)目會(huì)縮小和增長(zhǎng)。

03. 側(cè)邊欄布局：grid-template-columns: minmax(<min>, <max>) …)

此演示對(duì)網(wǎng)格布局利用了 minmax 函數(shù)。我們?cè)谶@里做的是將最小側(cè)邊欄大小設(shè)置為 150px ，但在更大的屏幕上，讓它伸展出 25% 。側(cè)邊欄將始終占據(jù)其父級(jí)水平空間的 25%，直到 25% 變得小于 150px 。

將以下值添加為 grid-template-columns 的值：minmax(150px, 25%) 1fr 。在第一列（在這種情況下，側(cè)邊欄）的項(xiàng)目其 minmax 為 150px（在25% ），第二列項(xiàng)目（這里指 main 部分）占據(jù)其余的空間作為單一的 1fr 軌道。

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

04. 煎餅堆棧布局：grid-template-rows: auto 1fr auto

與 Deconstructed Pancake 不同，當(dāng)屏幕尺寸改變時(shí)，本例不會(huì)包含它的子元素。通常稱為粘性頁(yè)腳，這種布局通常用于網(wǎng)站和應(yīng)用程序，跨多個(gè)移動(dòng)應(yīng)用程序（頁(yè)腳通常是工具欄）和網(wǎng)站（單頁(yè)應(yīng)用程序通常使用這種全局布局）。

向組件添加 display: grid 將為您提供一個(gè)單列網(wǎng)格，但是主區(qū)域的高度將僅與頁(yè)腳下方的內(nèi)容一樣高。

要使頁(yè)腳粘在底部，請(qǐng)?zhí)砑樱?/p>

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

1fr頁(yè)眉和頁(yè)腳內(nèi)容設(shè)置為自動(dòng)采用其子項(xiàng)的大小，并將剩余空間 ( 1fr ) 應(yīng)用于主區(qū)域，而auto調(diào)整大小的行將采用其子項(xiàng)的最小內(nèi)容的大小，以便該內(nèi)容大小增加，行本身將增長(zhǎng)以進(jìn)行調(diào)整。

05. 經(jīng)典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto

對(duì)于經(jīng)典的圣杯布局，有頁(yè)眉、頁(yè)腳、左側(cè)邊欄、右側(cè)邊欄和主要內(nèi)容。類似于以前的布局，但現(xiàn)在有側(cè)邊欄！

要使用一行代碼編寫(xiě)整個(gè)網(wǎng)格，請(qǐng)使用 grid-template 屬性。這使您可以同時(shí)設(shè)置行和列。

屬性和值對(duì)為：grid-template: auto 1fr auto / auto 1fr auto 。第一個(gè)和第二個(gè)以空格分隔的列表之間的斜線是行和列之間的分隔符。

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

與上一個(gè)示例一樣，頁(yè)眉和頁(yè)腳具有自動(dòng)調(diào)整大小的內(nèi)容，這里的左側(cè)和右側(cè)邊欄會(huì)根據(jù)其子項(xiàng)的固有大小自動(dòng)調(diào)整大小。但是，這次是水平尺寸（寬度）而不是垂直尺寸（高度）。

06. 12 跨網(wǎng)格：grid-template-columns: repeat(12, 1fr)

接下來(lái)我們有另一個(gè)經(jīng)典布局：12 跨網(wǎng)格。您可以使用 repeat() 函數(shù)在 CSS 中快速編寫(xiě)網(wǎng)格。對(duì)網(wǎng)格模板列使用 repeat(12, 1fr); 將為每個(gè) 1fr 提供 12 列。

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

現(xiàn)在您有一個(gè) 12 列的軌道網(wǎng)格，我們可以將子項(xiàng)放在網(wǎng)格上。一種方法是使用網(wǎng)格線放置它們。例如， grid-column: 1 / 13 將跨越從第一到最后一行（第 13 行）并跨越 12 列。grid-column: 1 / 5; 將跨越前四個(gè)列。

另一種方法是使用 span 關(guān)鍵字。使用 span ，您可以設(shè)置起始線，然后設(shè)置從該起點(diǎn)跨越的列數(shù)。在這種情況下，grid-column: 1 / span 12 將等效于 grid-column: 1 / 13 ，而 grid-column: 2 / span 6 將等效于 grid-column: 2 / 8 。

.child-span-12 {
  grid-column: 1 / span 12;
}

07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

對(duì)于這第七個(gè)示例，結(jié)合您已經(jīng)了解的一些概念來(lái)創(chuàng)建具有自動(dòng)放置且靈活的子項(xiàng)的響應(yīng)式布局。漂亮整齊。這里要記住的關(guān)鍵點(diǎn)是 repeat 、 auto-(fit|fill) 和 minmax()' ，可以記住它們的首字母縮寫(xiě)詞 RAM。

總之，應(yīng)是這樣：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

您再次使用 repeat ，但這次使用 auto-fit 關(guān)鍵字而不是顯式數(shù)值。這可以自動(dòng)放置這些子元素。這些子元素的基本最小值為 150px ，最大值為 1fr ，這意味著在較小的屏幕上，它們將占據(jù)整個(gè) 1fr 寬度，當(dāng)它們達(dá)到 150px 寬度時(shí)，它們將開(kāi)始流到同一條線上。

使用 auto-fit ，當(dāng)它們的水平尺寸超過(guò) 150px 時(shí)，框?qū)⒗煲蕴畛湔麄€(gè)剩余空間。但是，如果您將其更改為 auto-fill ，則當(dāng)超出 minmax 函數(shù)中的基本大小時(shí)，它們將不會(huì)拉伸：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. 排列布局：justify-content: space-between

對(duì)于下一個(gè)布局，這里要主要說(shuō)明的是 justify-content: space-between ，它將第一個(gè)和最后一個(gè)子元素放置在其邊界框的邊緣，其余空間均勻分布在元素之間。對(duì)于這些卡片，它們被放置在 Flexbox 顯示模式中，使用 flex-direction: column 將方向設(shè)置為 column。

這會(huì)將標(biāo)題、描述和圖像塊放在父卡片內(nèi)的垂直列中。然后，應(yīng)用 justify-content: space-between 將第一個(gè)（標(biāo)題）和最后一個(gè)（圖像塊）元素錨定到 flexbox 的邊緣，并且它們之間的描述性文本以相等的間距放置到每個(gè)端點(diǎn)。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. 保持我的風(fēng)格：clamp(<min>, <actual>, <max>)

這里，我們介紹一些只有少數(shù)瀏覽器支持的技術(shù)，但這些技術(shù)對(duì)布局和響應(yīng)式 UI 設(shè)計(jì)有非常令人興奮的影響。在本演示中，您將使用固定工具設(shè)置寬度，如下所示：width: clamp(<min>, <actual>, <max>) 。

這將設(shè)置絕對(duì)最小和最大尺寸以及實(shí)際尺寸。有了值，應(yīng)該這樣：

.parent {
  width: clamp(23ch, 60%, 46ch);
}

這里的最小尺寸是 23ch 或 23 個(gè)字符單元，最大尺寸是 46ch ，46 個(gè)字符。字符寬度單位基于元素的字體大小（特別是 0 字形的寬度）?！皩?shí)際”尺寸為 50%，代表此元素父寬度的 50%。

在這里， clamp() 函數(shù)所做的是使該元素保持 50% 的寬度，直到 50% 大于 46ch （在較寬的視口上）或小于 23ch （在較小的視口上）。您可以看到，當(dāng)我拉伸和收縮父尺寸時(shí)，這張卡片的寬度會(huì)增加到其最大限制點(diǎn)并減小到其限制最小點(diǎn)。然后它保持在父級(jí)的中心，因?yàn)槲覀円呀?jīng)應(yīng)用了其他的屬性來(lái)將它居中。這可以實(shí)現(xiàn)更清晰的布局，因?yàn)槲谋静粫?huì)太寬（超過(guò) 46ch ）或太窄（小于 23ch ）。

這也是實(shí)現(xiàn)響應(yīng)式排版的好方法。例如，您可以編寫(xiě)：font-size: clamp(1.5rem, 20vw, 3rem) 。在這種情況下，標(biāo)題的字體大小將始終保持在 1.5rem 和 3rem 之間，但會(huì)根據(jù) 20vw 實(shí)際值增大和縮小以適應(yīng)視口的寬度。

這是一種很好的技術(shù)，可以通過(guò)最小和最大尺寸值確保易讀性，但請(qǐng)記住，并非所有現(xiàn)代瀏覽器都支持它，因此請(qǐng)確保您有回退措施并進(jìn)行測(cè)試。

10.保持寬高比：aspect-ratio: <width> / <height>

最后要介紹的這一布局工具是最具實(shí)驗(yàn)性的工具。它最近在 Chromium 84 中被引入 Chrome Canary，F(xiàn)irefox 正在積極努力實(shí)現(xiàn)這一點(diǎn)，但目前還沒(méi)有任何穩(wěn)定的瀏覽器版本。

不過(guò)，我確實(shí)想提及這一點(diǎn)，因?yàn)檫@是一個(gè)經(jīng)常遇到的問(wèn)題。這只是簡(jiǎn)單地保持圖像的寬高比。

使用 aspect-ratio 屬性，當(dāng)我調(diào)整卡片大小時(shí)，綠色視覺(jué)塊保持 16 x 9 的寬高比。我們通過(guò) aspect-ratio: 16 / 9 保持此寬高比。

.video {
  aspect-ratio: 16 / 9;
}

要在沒(méi)有此屬性的情況下保持 16 x 9 的寬高比，需要使用 padding-top hack 并為其提供 56.25% 的 padding 以設(shè)置頂寬比。我們很快就會(huì)有一個(gè)屬性來(lái)避免黑客攻擊和計(jì)算百分比的需要?？梢允褂?1 / 1 的比例制作正方形，使用 2 / 1 制作 2:1 比例?？梢栽O(shè)置任何圖像縮放比例。

.square {
  aspect-ratio: 1 / 1;
}

雖然此功能仍在不斷完善中，但它值得了解，因?yàn)樗鉀Q了許多開(kāi)發(fā)人員面臨的沖突，我自己也多次面臨，尤其是在視頻和 iframe 方面。

*聲明：本文于網(wǎng)絡(luò)整理，版權(quán)歸原作者所有，如來(lái)源信息有誤或侵犯權(quán)益，請(qǐng)聯(lián)系我們刪除或授權(quán)事宜。