現(xiàn)代 CSS 布局使開發(fā)人員只需按幾下鍵就可以編寫十分有意義且強大的樣式規(guī)則伞梯。上面的討論和接下來的帖文研究了 10 種強大的 CSS 布局，它們實現(xiàn)了一些非凡的工作倔撞。
01. 超級居中：place-items: center
對于第一個“單行”布局讲仰，讓我們解決所有 CSS 領(lǐng)域中最大的謎團：居中。我想讓您知道痪蝇，使用 place-items: center 會讓此操作比您想象的容易鄙陡。
首先指定 grid 作為 display 方法，然后在同一個元素上寫入 place-items: center霹俺。place-items 是同時設(shè)置 align-items 和 justify-items 的快速方法柔吼。通過將其設(shè)置為 center ， align-items 和 justify-items 都將設(shè)置為 center丙唧。
.parent { display: grid; place-items: center;}
這使得內(nèi)容能夠在父級內(nèi)完美居中，而不管內(nèi)部大小觅玻。
02. 解構(gòu)煎餅式布局：flex: <grow> <shrink> <baseWidth>
接下來我們有解構(gòu)的煎餅想际！這是營銷網(wǎng)站的常見布局培漏，例如，可能有一行 3 個項目胡本，通常帶有圖像牌柄、標(biāo)題，然后是一些描述產(chǎn)品某些功能的文本侧甫。在移動設(shè)備上珊佣，我們希望它們能夠很好地堆疊，并隨著我們增加屏幕尺寸而擴展披粟。
通過使用 Flexbox 實現(xiàn)此效果咒锻，您不需要在屏幕尺寸發(fā)生變化時通過媒體查詢來調(diào)整這些元素的位置。
flex 簡寫代表：flex: <flex-grow> <flex-shrink> <flex-basis> 守屉。
正因為如此惑艇，如果您想讓您的框填充到它們的 <flex-basis> 大小，縮小到更小的尺寸拇泛，但不拉伸以填充任何額外的空間滨巴，請寫入：flex: 0 1 <flex-basis> 。在這種情況下俺叭，您的 <flex-basis> 是 150px恭取，所以應(yīng)該是這樣：
.parent { display: flex;}.child { flex: 0 1 150px;}
如果您確實希望框在換到下一行時拉伸并填充空間，請將 <flex-grow> 設(shè)置為 1 熄守，所以應(yīng)該是這樣：
.parent { display: flex;}.child { flex: 1 1 150px;}
現(xiàn)在蜈垮，當(dāng)您增加或減少屏幕尺寸時，這些 flex 項目會縮小和增長柠横。
03. 側(cè)邊欄布局：grid-template-columns: minmax(<min>, <max>) …)
此演示對網(wǎng)格布局利用了 minmax 函數(shù)窃款。我們在這里做的是將最小側(cè)邊欄大小設(shè)置為 150px ，但在更大的屏幕上牍氛，讓它伸展出 25% 晨继。側(cè)邊欄將始終占據(jù)其父級水平空間的 25%，直到 25% 變得小于 150px 搬俊。
將以下值添加為 grid-template-columns 的值：minmax(150px, 25%) 1fr 紊扬。在第一列（在這種情況下，側(cè)邊欄）的項目其 minmax 為 150px（在25% ）唉擂，第二列項目（這里指 main 部分）占據(jù)其余的空間作為單一的 1fr 軌道餐屎。
.parent { display: grid; grid-template-columns: minmax(150px, 25%) 1fr;}
04. 煎餅堆棧布局：grid-template-rows: auto 1fr auto
與 Deconstructed Pancake 不同，當(dāng)屏幕尺寸改變時玩祟，本例不會包含它的子元素腹缩。通常稱為粘性頁腳，這種布局通常用于網(wǎng)站和應(yīng)用程序，跨多個移動應(yīng)用程序（頁腳通常是工具欄）和網(wǎng)站（單頁應(yīng)用程序通常使用這種全局布局）藏鹊。
向組件添加 display: grid 將為您提供一個單列網(wǎng)格润讥，但是主區(qū)域的高度將僅與頁腳下方的內(nèi)容一樣高。
要使頁腳粘在底部盘寡，請?zhí)砑樱?/p>
.parent { display: grid; grid-template-rows: auto 1fr auto;}
1fr頁眉和頁腳內(nèi)容設(shè)置為自動采用其子項的大小楚殿，并將剩余空間 ( 1fr ) 應(yīng)用于主區(qū)域，而auto調(diào)整大小的行將采用其子項的最小內(nèi)容的大小竿痰，以便該內(nèi)容大小增加脆粥，行本身將增長以進行調(diào)整。
05. 經(jīng)典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto
對于經(jīng)典的圣杯布局影涉，有頁眉变隔、頁腳、左側(cè)邊欄常潮、右側(cè)邊欄和主要內(nèi)容弟胀。類似于以前的布局，但現(xiàn)在有側(cè)邊欄喊式！
要使用一行代碼編寫整個網(wǎng)格孵户，請使用 grid-template 屬性。這使您可以同時設(shè)置行和列岔留。
屬性和值對為：grid-template: auto 1fr auto / auto 1fr auto 夏哭。第一個和第二個以空格分隔的列表之間的斜線是行和列之間的分隔符。
.parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto;}
與上一個示例一樣献联，頁眉和頁腳具有自動調(diào)整大小的內(nèi)容竖配，這里的左側(cè)和右側(cè)邊欄會根據(jù)其子項的固有大小自動調(diào)整大小。但是里逆，這次是水平尺寸（寬度）而不是垂直尺寸（高度）进胯。
06. 12 跨網(wǎng)格：grid-template-columns: repeat(12, 1fr)
接下來我們有另一個經(jīng)典布局：12 跨網(wǎng)格。您可以使用 repeat() 函數(shù)在 CSS 中快速編寫網(wǎng)格原押。對網(wǎng)格模板列使用 repeat(12, 1fr); 將為每個 1fr 提供 12 列胁镐。
.parent { display: grid; grid-template-columns: repeat(12, 1fr);}.child-span-12 { grid-column: 1 / 13;}
現(xiàn)在您有一個 12 列的軌道網(wǎng)格，我們可以將子項放在網(wǎng)格上诸衔。一種方法是使用網(wǎng)格線放置它們盯漂。例如， grid-column: 1 / 13 將跨越從第一到最后一行（第 13 行）并跨越 12 列笨农。grid-column: 1 / 5; 將跨越前四個列就缆。
另一種方法是使用 span 關(guān)鍵字。使用 span 谒亦，您可以設(shè)置起始線竭宰，然后設(shè)置從該起點跨越的列數(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))
對于這第七個示例脾还，結(jié)合您已經(jīng)了解的一些概念來創(chuàng)建具有自動放置且靈活的子項的響應(yīng)式布局伴箩。漂亮整齊。這里要記住的關(guān)鍵點是 repeat 鄙漏、 auto-(fit|fill) 和 minmax()' 嗤谚，可以記住它們的首字母縮寫詞 RAM。
總之怔蚌，應(yīng)是這樣：
.parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
您再次使用 repeat 巩步，但這次使用 auto-fit 關(guān)鍵字而不是顯式數(shù)值。這可以自動放置這些子元素桦踊。這些子元素的基本最小值為 150px 椅野，最大值為 1fr ，這意味著在較小的屏幕上籍胯，它們將占據(jù)整個 1fr 寬度竟闪，當(dāng)它們達到 150px 寬度時，它們將開始流到同一條線上杖狼。
使用 auto-fit 炼蛤，當(dāng)它們的水平尺寸超過 150px 時，框?qū)⒗煲蕴畛湔麄€剩余空間蝶涩。但是理朋，如果您將其更改為 auto-fill ，則當(dāng)超出 minmax 函數(shù)中的基本大小時绿聘，它們將不會拉伸：
<figcaption style="margin: 5px 0px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; text-align: center; color: rgb(136, 136, 136); font-size: 14px;">
</figcaption>
.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 將方向設(shè)置為 column烹看。
這會將標(biāo)題、描述和圖像塊放在父卡片內(nèi)的垂直列中洛史。然后惯殊，應(yīng)用 justify-content: space-between 將第一個（標(biāo)題）和最后一個（圖像塊）元素錨定到 flexbox 的邊緣，并且它們之間的描述性文本以相等的間距放置到每個端點也殖。
.parent { display: flex; flex-direction: column; justify-content: space-between;}
09. 保持我的風(fēng)格：clamp(<min>, <actual>, <max>)
這里土思，我們介紹一些只有少數(shù)瀏覽器支持的技術(shù)务热，但這些技術(shù)對布局和響應(yīng)式 UI 設(shè)計有非常令人興奮的影響。在本演示中己儒，您將使用固定工具設(shè)置寬度崎岂，如下所示：width: clamp(<min>, <actual>, <max>) 。
這將設(shè)置絕對最小和最大尺寸以及實際尺寸闪湾。有了值冲甘，應(yīng)該這樣：
.parent { width: clamp(23ch, 60%, 46ch);}
這里的最小尺寸是 23ch 或 23 個字符單元，最大尺寸是 46ch 途样，46 個字符江醇。字符寬度單位基于元素的字體大小（特別是 0 字形的寬度）何暇√找梗“實際”尺寸為 50%，代表此元素父寬度的 50%裆站。
在這里条辟， clamp() 函數(shù)所做的是使該元素保持 50% 的寬度，直到 50% 大于 46ch （在較寬的視口上）或小于 23ch （在較小的視口上）宏胯。您可以看到羽嫡，當(dāng)我拉伸和收縮父尺寸時，這張卡片的寬度會增加到其最大限制點并減小到其限制最小點胳嘲。然后它保持在父級的中心厂僧，因為我們已經(jīng)應(yīng)用了其他的屬性來將它居中。這可以實現(xiàn)更清晰的布局了牛，因為文本不會太寬（超過 46ch ）或太窄（小于 23ch ）颜屠。
這也是實現(xiàn)響應(yīng)式排版的好方法。例如鹰祸，您可以編寫：font-size: clamp(1.5rem, 20vw, 3rem) 甫窟。在這種情況下，標(biāo)題的字體大小將始終保持在 1.5rem 和 3rem 之間蛙婴，但會根據(jù) 20vw 實際值增大和縮小以適應(yīng)視口的寬度粗井。
這是一種很好的技術(shù)，可以通過最小和最大尺寸值確保易讀性街图，但請記住浇衬，并非所有現(xiàn)代瀏覽器都支持它，因此請確保您有回退措施并進行測試餐济。
10.保持寬高比：aspect-ratio: <width> / <height>
最后要介紹的這一布局工具是最具實驗性的工具耘擂。它最近在 Chromium 84 中被引入 Chrome Canary，F(xiàn)irefox 正在積極努力實現(xiàn)這一點絮姆，但目前還沒有任何穩(wěn)定的瀏覽器版本醉冤。
不過秩霍，我確實想提及這一點，因為這是一個經(jīng)常遇到的問題蚁阳。這只是簡單地保持圖像的寬高比铃绒。
使用 aspect-ratio 屬性，當(dāng)我調(diào)整卡片大小時螺捐，綠色視覺塊保持 16 x 9 的寬高比颠悬。我們通過 aspect-ratio: 16 / 9 保持此寬高比。
.video { aspect-ratio: 16 / 9;}
要在沒有此屬性的情況下保持 16 x 9 的寬高比归粉，需要使用 padding-top hack 并為其提供 56.25% 的 padding 以設(shè)置頂寬比椿疗。我們很快就會有一個屬性來避免黑客攻擊和計算百分比的需要】返浚可以使用 1 / 1 的比例制作正方形，使用 2 / 1 制作 2:1 比例浅乔【笪梗可以設(shè)置任何圖像縮放比例。
.square { aspect-ratio: 1 / 1;}
雖然此功能仍在不斷完善中靖苇，但它值得了解席噩，因為它解決了許多開發(fā)人員面臨的沖突，我自己也多次面臨贤壁，尤其是在視頻和 iframe 方面悼枢。
