如何用一行 CSS 實現 10 種現代佈局
現代 CSS 佈局使開發人員只需按幾下鍵就可以編寫十分有意義且強大的樣式規則。上面的討論和接下來的帖文研究了 10 種強大的 CSS 佈局，它們實現了一些非凡的工作。
01. 超級居中：place-items: center
對於第一個 “單行” 佈局，讓我們解決所有 CSS 領域中最大的謎團：居中。我想讓您知道，使用 place-items: center 會讓此操作比您想象的容易。
首先指定 grid 作爲 display 方法，然後在同一個元素上寫入 place-items: center。place-items 是同時設置 align-items 和 justify-items 的快速方法。通過將其設置爲 center ， align-items 和 justify-items 都將設置爲 center。
.parent {
display: grid;
place-items: center;
}這使得內容能夠在父級內完美居中，而不管內部大小。
02. 解構煎餅式佈局：flex: <grow> <shrink> <baseWidth>
接下來我們有解構的煎餅！這是營銷網站的常見佈局，例如，可能有一行 3 個項目，通常帶有圖像、標題，然後是一些描述產品某些功能的文本。在移動設備上，我們希望它們能夠很好地堆疊，並隨着我們增加屏幕尺寸而擴展。
通過使用 Flexbox 實現此效果，您不需要在屏幕尺寸發生變化時通過媒體查詢來調整這些元素的位置。
flex 簡寫代表：flex: <flex-grow> <flex-shrink> <flex-basis> 。
正因爲如此，如果您想讓您的框填充到它們的 <flex-basis> 大小，縮小到更小的尺寸，但不拉伸以填充任何額外的空間，請寫入：flex: 0 1 <flex-basis> 。在這種情況下，您的 <flex-basis> 是 150px，所以應該是這樣：
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}如果您確實希望框在換到下一行時拉伸並填充空間，請將 <flex-grow> 設置爲 1 ，所以應該是這樣：
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}現在，當您增加或減少屏幕尺寸時，這些 flex 項目會縮小和增長。
03. 側邊欄佈局：grid-template-columns: minmax(<min>, <max>) …)
此演示對網格佈局利用了 minmax 函數。我們在這裏做的是將最小側邊欄大小設置爲 150px ，但在更大的屏幕上，讓它伸展出 25% 。側邊欄將始終佔據其父級水平空間的 25%，直到 25% 變得小於 150px 。
將以下值添加爲 grid-template-columns 的值：minmax(150px, 25%) 1fr 。在第一列（在這種情況下，側邊欄）的項目其 minmax 爲 150px（在 25% ），第二列項目（這裏指 main 部分）佔據其餘的空間作爲單一的 1fr 軌道。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}04. 煎餅堆棧佈局：grid-template-rows: auto 1fr auto
與 Deconstructed Pancake 不同，當屏幕尺寸改變時，本例不會包含它的子元素。通常稱爲粘性頁腳，這種佈局通常用於網站和應用程序，跨多個移動應用程序（頁腳通常是工具欄）和網站（單頁應用程序通常使用這種全局佈局）。
向組件添加 display: grid 將爲您提供一個單列網格，但是主區域的高度將僅與頁腳下方的內容一樣高。
要使頁腳粘在底部，請添加：
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}1fr 頁眉和頁腳內容設置爲自動採用其子項的大小，並將剩餘空間 (1fr) 應用於主區域，而 auto 調整大小的行將採用其子項的最小內容的大小，以便該內容大小增加，行本身將增長以進行調整。
05. 經典聖盃佈局：grid-template: auto 1fr auto / auto 1fr auto
對於經典的聖盃佈局，有頁眉、頁腳、左側邊欄、右側邊欄和主要內容。類似於以前的佈局，但現在有側邊欄！
要使用一行代碼編寫整個網格，請使用 grid-template 屬性。這使您可以同時設置行和列。
屬性和值對爲：grid-template: auto 1fr auto / auto 1fr auto 。第一個和第二個以空格分隔的列表之間的斜線是行和列之間的分隔符。
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}與上一個示例一樣，頁眉和頁腳具有自動調整大小的內容，這裏的左側和右側邊欄會根據其子項的固有大小自動調整大小。但是，這次是水平尺寸（寬度）而不是垂直尺寸（高度）。
06. 12 跨網格：grid-template-columns: repeat(12, 1fr)
接下來我們有另一個經典佈局：12 跨網格。您可以使用 repeat() 函數在 CSS 中快速編寫網格。對網格模板列使用 repeat(12, 1fr); 將爲每個 1fr 提供 12 列。
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}現在您有一個 12 列的軌道網格，我們可以將子項放在網格上。一種方法是使用網格線放置它們。例如， grid-column: 1 / 13 將跨越從第一到最後一行（第 13 行）並跨越 12 列。grid-column: 1 / 5; 將跨越前四個列。
另一種方法是使用 span 關鍵字。使用 span ，您可以設置起始線，然後設置從該起點跨越的列數。在這種情況下，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))
對於這第七個示例，結合您已經瞭解的一些概念來創建具有自動放置且靈活的子項的響應式佈局。漂亮整齊。這裏要記住的關鍵點是 repeat 、 auto-(fit|fill) 和 minmax()' ，可以記住它們的首字母縮寫詞 RAM。
總之，應是這樣：
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}您再次使用 repeat ，但這次使用 auto-fit 關鍵字而不是顯式數值。這可以自動放置這些子元素。這些子元素的基本最小值爲 150px ，最大值爲 1fr ，這意味着在較小的屏幕上，它們將佔據整個 1fr 寬度，當它們達到 150px 寬度時，它們將開始流到同一條線上。
使用 auto-fit ，當它們的水平尺寸超過 150px 時，框將拉伸以填充整個剩餘空間。但是，如果您將其更改爲 auto-fill ，則當超出 minmax 函數中的基本大小時，它們將不會拉伸：
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}08. 排列布局：justify-content: space-between
對於下一個佈局，這裏要主要說明的是 justify-content: space-between ，它將第一個和最後一個子元素放置在其邊界框的邊緣，其餘空間均勻分佈在元素之間。對於這些卡片，它們被放置在 Flexbox 顯示模式中，使用 flex-direction: column 將方向設置爲 column。
這會將標題、描述和圖像塊放在父卡片內的垂直列中。然後，應用 justify-content: space-between 將第一個（標題）和最後一個（圖像塊）元素錨定到 flexbox 的邊緣，並且它們之間的描述性文本以相等的間距放置到每個端點。
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}09. 保持我的風格：clamp(<min>, <actual>, <max>)
這裏，我們介紹一些只有少數瀏覽器支持的技術，但這些技術對佈局和響應式 UI 設計有非常令人興奮的影響。在本演示中，您將使用固定工具設置寬度，如下所示：width: clamp(<min>, <actual>, <max>) 。
這將設置絕對最小和最大尺寸以及實際尺寸。有了值，應該這樣：
.parent {
width: clamp(23ch, 60%, 46ch);
}這裏的最小尺寸是 23ch 或 23 個字符單元，最大尺寸是 46ch ，46 個字符。字符寬度單位基於元素的字體大小（特別是 0 字形的寬度）。“實際” 尺寸爲 50%，代表此元素父寬度的 50%。
在這裏， clamp() 函數所做的是使該元素保持 50% 的寬度，直到 50% 大於 46ch （在較寬的視口上）或小於 23ch （在較小的視口上）。您可以看到，當我拉伸和收縮父尺寸時，這張卡片的寬度會增加到其最大限制點並減小到其限制最小點。然後它保持在父級的中心，因爲我們已經應用了其他的屬性來將它居中。這可以實現更清晰的佈局，因爲文本不會太寬（超過 46ch ）或太窄（小於 23ch ）。
這也是實現響應式排版的好方法。例如，您可以編寫：font-size: clamp(1.5rem, 20vw, 3rem) 。在這種情況下，標題的字體大小將始終保持在 1.5rem 和 3rem 之間，但會根據 20vw 實際值增大和縮小以適應視口的寬度。
這是一種很好的技術，可以通過最小和最大尺寸值確保易讀性，但請記住，並非所有現代瀏覽器都支持它，因此請確保您有回退措施並進行測試。
10. 保持寬高比：aspect-ratio: <width> / <height>
最後要介紹的這一佈局工具是最具實驗性的工具。它最近在 Chromium 84 中被引入 Chrome Canary，Firefox 正在積極努力實現這一點，但目前還沒有任何穩定的瀏覽器版本。
不過，我確實想提及這一點，因爲這是一個經常遇到的問題。這只是簡單地保持圖像的寬高比。
使用 aspect-ratio 屬性，當我調整卡片大小時，綠色視覺塊保持 16 x 9 的寬高比。我們通過 aspect-ratio: 16 / 9 保持此寬高比。
.video {
aspect-ratio: 16 / 9;
}要在沒有此屬性的情況下保持 16 x 9 的寬高比，需要使用 padding-top hack 併爲其提供 56.25% 的 padding 以設置頂寬比。我們很快就會有一個屬性來避免黑客攻擊和計算百分比的需要。可以使用 1 / 1 的比例製作正方形，使用 2 / 1 製作 2:1 比例。可以設置任何圖像縮放比例。
.square {
aspect-ratio: 1 / 1;
}雖然此功能仍在不斷完善中，但它值得了解，因爲它解決了許多開發人員面臨的衝突，我自己也多次面臨，尤其是在視頻和 iframe 方面。
結論
感謝您耐心完成對這 10 種強大的 CSS 佈局的瞭解。要了解更多信息，請觀看完整視頻，並親自嘗試演示。
完整視頻：https://www.youtube.com/watch?v=qm0IfG1GyZU
演示：https://1linelayouts.glitch.me/
作者：懵懵懂懂學前端
https://blog.csdn.net/qq_56966124/article/details/124225189
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/l0u2_0S9LoFdLAJeWshHgg