Chromium 抵達 Flexbox 差距

Chromium 的 CSS Flexbox 和多欄版面配置引擎可以使用 CSS gap 屬性。

Adam Argyle

David Grogan

CSS 缺口

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

瀏覽器相容性

使用方式

gap 可接受任何 CSS length 或 percentage 做為值。

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

差距可以傳送 1 個長度，列和欄都使用這 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

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

先前的嘗試次數

以下是大家用來計算類似間距間距的模式。

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

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

但上述方法並非完全取代 gap，而且通常需要調整 @media 或 :lang()，才能因應包裝情境、寫入模式或方向。新增一或兩個媒體查詢雖然不是好事，但可能會使版面配置邏輯更加複雜。

上述作者的真正意圖是完全不牽涉到任何子項項目。

反點：間隙

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

在前 2 個範例中 (沒有 Flexbox gap)，系統會鎖定子項，並從其他元素指派間距。在「antidote gap」範例中，容器擁有間距。每個子項都能減輕工作負擔，同時集中控管空間的擁有權。簡化一致性。重新排序、變更可視區域、移除元素、附加新元素等，間距也保持一致。沒有新選擇器，也沒有新的媒體查詢，只是空格。

Chromium 開發人員工具更新

隨著 Chromium 開發人員工具的這些更新進行調整，請注意樣式窗格現在如何處理 grid-gap 和 gap 👍?

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

全新版面配置潛力

有了 Flexbox gap，我們能夠帶來比便利更便利的使用體驗。我們解鎖了功能強大、空間恰到好處的內建版面配置在影片和下方的程式碼範例中，格線無法達到 Flexbox 所能的版面配置。即便是內建指派作業的格線，格線就必須有相同的資料列和資料欄。

另請注意，子項之間的間距會隨這類元素自動換行時。媒體查詢無法偵測類似的包裝，因此無法進行智慧調整。Flexbox gap 可以支援範圍並支援所有國際語言。

多欄 gap

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

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

亮眼雷達。