一行 CSS 提供十種現代版面配置

本文將介紹幾行功能強大的 CSS,可協助您建立穩固的現代版面配置。

現代 CSS 版面配置可讓開發人員只需按幾下鍵盤按鍵,就能編寫真正實用且健全的樣式規則。上述演講和後續文章將探討 10 行功能強大的 CSS,這些 CSS 可執行一些繁重的工作。

如要跟著操作或自行操作這些示範,請參閱上方的 Glitch 嵌入內容,或前往 1linelayouts.glitch.me

1 日超級居中:place-items: center

針對第一個「單行」版面配置,我們來解開 CSS 領域中最大的謎團:對齊項目。我想讓你知道,使用 place-items: center 比你想像中還簡單。

首先,請將 grid 指定為 display 方法,然後在同一個元素上寫入 place-items: centerplace-items 是同時設定 align-itemsjustify-items 的簡寫語法。將其設為 center 後,align-itemsjustify-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% 取得 150pxminmax,而第二個項目 (本例中的 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))

在第七個範例中,您將結合已學習的部分概念,建立回應式版面配置,並使用自動放置的彈性子項。很不錯。這裡的重點字詞是 repeatauto-(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.5rem3rem 之間,但會根據 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 方面。

結論

感謝您觀看這 10 行強大的 CSS 程式碼。如要進一步瞭解,請觀看完整影片,並親自試用示範