本文重點介紹幾行功能強大的 CSS 供應商,他們需要處理一些繁瑣的工作,並協助您建立穩固的新式版面配置。
現代化的 CSS 版面配置,讓開發人員只需按幾下按鍵,就能編寫真正實用且完善的樣式規則。上述內容及後續文章的討論範圍涵蓋 10 大業務強大的 CSS 供應商,可為您完成部分繁重的工作。
如要實際操作或試玩這些示範,請使用上方的 Glitch 嵌入項目,或造訪 1linelayouts.glitch.me。
1 日已直接置中: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%
小於 150px
之前,側欄一律會顯示其父項水平空間的 25%
。
請將此值新增為格線範本-欄的值,並包含下列值:
minmax(150px, 25%) 1fr
。第一欄的項目 (在本例中為側欄) 會在 25%
取得 150px
的 minmax
,第二個項目 (這裡的 main
區段) 則會將其餘空間當做單一 1fr
軌跡使用。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
1 日鬆餅堆疊:grid-template-rows: auto 1fr auto
與「解構的 Pancake」不同,這個範例不會在螢幕大小變更時納入其子項。通常稱為固定式頁尾。這個版面配置常用於網站和應用程式、行動應用程式 (頁尾通常是工具列) 和網站 (單一頁面應用程式通常會使用這個全域版面配置)。
在元件中新增 display: grid
即可顯示單一欄的格線,但主要區域的高度和下方含有頁尾的內容。
如要讓頁尾固定在底部,請新增以下內容:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
這個選項會設定標頭和頁尾內容,自動擷取子項的大小,並將剩餘的空間 (1fr
) 套用到主要區域,而 auto
大小的列則會採用其子項內容的最小內容大小。這樣如果內容大小增加,資料列本身就會隨之放大。
05.傳統版 Holy Grail 版面配置: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-Span 格線: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 (重複、自動、最低出價):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));
}
您再度使用重複功能,但這次使用的是 auto-fit
關鍵字,而非明確的數值。這樣就能自動放置這些子元素。這些子項也會接受基本最小值 150px
而最大值 1fr
,也就是說,在較小的螢幕上,它們會佔滿1fr
整個寬度,而且隨著每個子項的寬度達到 150px
,兩者將會在同一線流上。
如果使用 auto-fit
,方塊會在水平大小超過 150 像素時延展,以填滿剩餘空間。不過,如果您將這個值變更為 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
將方向設為欄。
這樣標題、說明和圖片區塊就會放在上層資訊卡的垂直欄中。接著,將 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
駭客入侵事件,並為它加上 56.25%
的邊框間距,以便設定由上到寬的比例。我們很快就會推出資源,以避免入侵,並需要計算百分比。只要製作一個比例為 1 / 1
、2 比 1 比 2 / 1
的正方形,就能運用任何所需設定,讓圖片以固定大小比例縮放。
.square {
aspect-ratio: 1 / 1;
}
雖然這項功能仍在開發階段,但我們還是要推出這項工具,解決我自己已有許多開發人員過關問題,尤其是影片和 iframe 的部分更是如此。