Chromium 抵達 Flexbox 差距

CSS gap 屬性適用於 Chromium 的 CSS Flexbox 和多欄版面配置引擎。

Adam Argyle

David Grogan

CSS 差距

重要詞彙： gap 是子項之間的間距。您可能聽過這類間距稱為「溝槽」或「巷道」。只有在子項方塊的邊緣相接時，才會出現間距。

gap 是流程相對，也就是說，系統會根據內容流程的方向動態變更。舉例來說，gap 會自動根據你為國際使用者設定的 writing-mode 或 direction 值進行調整。這可大幅減輕元件和 CSS 作者在間距方面的負擔。進一步減少程式碼規模。

Gap 示範本地化支援，因為它會處理方向和寫入模式的變更： Codepen | 推文

瀏覽器相容性

Browser Support

• 57
• 16
• 52
• 10.1

Source

用量

gap 接受任何 CSS 長度或百分比做為值。

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

間距可以傳遞 1 個長度，用於列和欄。

速記

.grid {
  display: grid;
  gap: 10px;
}

一次同時設定列和欄

已展開

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

間距可以傳遞 2 個長度，分別用於列和欄。

速記

.grid {
  display: grid;
  gap: 10px 5%;
}

一次分別設定列和欄

已展開

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

在 Flexbox 之前，策略會涉及負邊界、複雜的選取器、gap:last或 :first 型別虛擬類別選取器，或是其他方法來管理動態配置和包裝的一組子項目的空間。

先前的嘗試

以下是使用者用來取得間隙式間距的模式。

虛擬類別選取器

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

lobotomized owl

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

來源

不過，上述方法並非 gap 的完整替代方案，通常需要 @media 或 :lang() 調整，才能因應換行情境、書寫模式或方向。新增一或兩個媒體查詢似乎沒什麼問題，但這些查詢可能會累積，導致版面配置邏輯變得複雜。

上述作者的真正意圖是讓子項目的任何部分都不會觸碰。

解決方法：間距

.layout {
  display: flex;
  gap: 10px;
}

注意： 間距的擁有權會從子項轉移至父項

在前 2 個範例 (沒有 Flexbox gap) 中，子項會成為目標，並從其他元素指派間距。在解毒劑間距範例中，容器擁有間距。每個子項都可以卸除負擔，同時集中管理間距擁有權。簡化一致性。重新排序、變更檢視區塊、移除元素、附加新元素等，間距會保持一致。沒有新的選取器，也沒有新的媒體查詢，只有空格。

Chromium 開發人員工具更新

這些更新也帶來 Chromium 開發人員工具的變更，請注意「樣式」窗格現在如何處理 grid-gap 和 gap 👍

開發人員工具會同時顯示 grid-gap 和 gap，並在 grid-gap 下方顯示 gap，讓層疊樣式表使用最新語法。

開發人員工具同時支援 grid-gap 和 gap，這是因為 gap 基本上是先前語法的別名。

新版面配置的潛力

Flexbox gap 不僅方便，我們解鎖了強大、間距完美、內建的版面配置。在影片和下列程式碼範例中，Grid 無法達成 Flexbox 可以達成的版面配置。格線必須有相同數量的列和欄，即使是內建指派也一樣。

推文

此外，請注意子項在以這種方式本質包裝時，間距會如何動態變化。媒體查詢無法偵測這類換行，因此無法進行智慧調整。 Flexbox gap 可以，而且會為您處理所有國際化作業。

多欄 gap

除了 Flexbox 支援 gap 語法，多欄版面配置也支援較短的 gap 語法。

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

非常酷。