本文將介紹幾行功能強大的 CSS,可協助您建立穩固的現代版面配置。
現代 CSS 版面配置可讓開發人員只需按幾下鍵盤按鍵,就能編寫真正實用且健全的樣式規則。上述演講和後續文章將探討 10 行功能強大的 CSS,這些 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%
,直到 25%
變小到小於 150px
為止。
將此值新增為 grid-template-columns 的值,並使用以下值:minmax(150px, 25%) 1fr
。第一個欄中的項目 (本例中的側欄) 會在 25%
取得 150px
的 minmax
,而第二個項目 (本例中的 main
部分) 會占用剩餘的空間,做為單一 1fr
軌道。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
1 日Pancake Stack:grid-template-rows: auto 1fr auto
與「解構鬆餅」不同,這個範例不會在螢幕大小變更時包裝子項。這種版面配置通常稱為固定底部,常用於網站和應用程式,包括行動應用程式 (底部通常是工具列) 和網站 (單頁應用程式通常會使用這種全域版面配置)。
將 display: grid
新增至元件,即可獲得單欄格狀,但主要區域的高度只會與內容相等,且下方會顯示頁尾。
如要讓頁尾固定在底部,請新增:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
這會將標題和頁尾內容設為自動採用子項的大小,並將剩餘空間 (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);
做為格狀範本的資料欄,可產生 12 個 1fr
資料欄。
.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));
}
您再次使用 repeat,但這次使用 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
將第一個 (標題) 和最後一個 (圖片區塊) 元素固定在彈性容器的邊緣,並在兩者之間放置說明文字,且與每個端點之間的間距相同。
.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 方面。