Chromium 抵達 Flexbox 差距

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

Adam Argyle

David Grogan

CSS 間距

gap 是相對於資料流，也就是說，它會根據內容流的方向動態變更。舉例來說，gap 會自動調整您為國際使用者設定的不同 writing-mode 或 direction 值。這可大幅減輕元件和 CSS 作者的排版問題。減少程式碼進一步調度資源。

瀏覽器相容性

用量

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

在 gap 加入 Flexbox 之前，策略包括負邊界、複雜的選取器、:last 或 :first 類型的虛擬類別選取器，或其他用於管理動態版面配置和包裝子項集合的空間的手段。

先前的嘗試

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

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

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

不過，上述做法無法完全取代 gap，而且經常需要調整 @media 或 :lang() 來因應包裝情境、寫入模式或方向。新增一或兩個媒體查詢似乎沒什麼大不了，但這些查詢會累積，導致版面配置邏輯變得複雜。

上述作者真正的意向是讓其他子物品不接觸。

解藥：gap

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

在前 2 個範例 (不含 Flexbox gap) 中，系統會指定子項，並指派與其他元素的間距。在對症療法間距範例中，容器擁有間距。每個子項都能減輕負擔，同時集中管理間距。簡化一致性。重新排序、變更檢視區、移除元素、附加新元素等，且間距保持一致。沒有新的選取器，也沒有新的媒體查詢，只有空格。

Chromium 開發人員工具更新

這些更新會影響 Chromium 開發人員工具，請注意「Styles」窗格現在如何處理 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;
}

差不多，