注意'差距”

CSS gap屬性並非新鮮事物，但去年它獲得了一項重要的新功能：現在它不僅適用於CSS Grid，也適用於Flexbox。鑑於此，並且我認為該屬性比看起來更複雜，因此我想回顧並準確解釋其工作原理。

讓我們仔細研究gap及其相關屬性，並了解它們如何以及在哪里工作。

所有gap 屬性

首先，讓我們回顧所有與gap相關的CSS 屬性。共有六個：

• grid-row-gap
• grid-column-gap
• grid-gap
• row-gap
• column-gap
• gap

從這個列表中，我們可以忽略前三個屬性。 grid-*屬性是在起草CSS Grid 規範的早期添加的，後來在gap變得更通用時被棄用。瀏覽器仍然支持這些被棄用的grid-*屬性（截至撰寫本文時），並且僅僅將它們視為不存在grid-前綴。因此， grid-gap與gap相同， grid-column-gap與column-gap相同， grid-row-gap與row-gap相同。

至於其他三個屬性，考慮到gap是一個簡寫，允許您指定其他兩個屬性，我們實際上只需要知道row-gap和column-gap的作用。

我們對這些屬性的理解取決於我們使用的CSS 佈局類型。讓我們首先看看這些選項。

gap 可用於何處？

如果您像我一樣，您已經在網格佈局中使用了gap ，但現在它也可以用於Flexbox 以及多列佈局。讓我們回顧每種情況。

Grid gaps

所有瀏覽器都支持網格佈局中的gap ，並且在此上下文中它們非常容易理解。

• row-gap在行軌道之間引入空間
• column-gap在列軌道之間引入空間

讓我們創建一個具有三列和兩行的網格：

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; }</code>

這將給我們以下網格：

上圖中的線稱為網格線，它們分隔網格的軌道（行和列）。這些線在網格中並不真正存在——它們是不可見的，沒有厚度，並且通常是當我們啟用網格檢查器（在Safari、Firefox、Edge 或Chrome 中）時DevTools 顯示的內容。

但是，如果我們開始向網格添加間隙，它將像這些線開始獲得厚度一樣工作。

讓我們添加一個20px 的間隙：

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; gap: 20px; }</code>

現在，我們軌道之間的線有20px 厚，因此將網格項目推得更遠。

值得注意的是，軌道仍然具有相同的大小（由grid-template-*屬性定義）；因此，網格比沒有間隙時更寬更大。

在網格中， row-gap始終應用於行軌道之間。因此，如果我們在上面的示例中用row-gap替換gap ，我們將得到：

而column-gap始終應用於列軌道之間，因此用column-gap替換gap會產生以下結果：

網格很簡單，因為默認情況下，列是垂直的，行是水平的，就像在表格中一樣。因此，很容易記住column-gap和row-gap應用的位置。

現在，當使用writing-mode時，事情會變得稍微複雜一些。網絡上的默認書寫模式是從左到右的水平模式，但也有垂直書寫模式，當發生這種情況時，列變為水平，行變為垂直。始終注意writing-mode ，因為它可能使其不如通常那樣直觀。

這是一個很好的過渡到下一節，因為列和行在Flexbox 中獲得了新的含義。

Flexbox gaps

讓我們談談Flexbox 佈局中的間隙，這裡的事情變得稍微複雜一些。我們將使用以下示例：

 <code>.container { display: flex; }</code>

默認情況下，這將給我們一個行Flex 容器，這意味著容器內的項目從左到右堆疊在同一水平線上。

在這種情況下， column-gap應用於項目之間，而row-gap沒有任何作用。這是因為只有一行（或行）。但現在讓我們在項目之間添加一些間隙：

 <code>.container { display: flex; column-gap: 10px; }</code>

現在讓我們將容器的flex-direction切換為列，它將項目從上到下垂直堆疊，使用以下代碼：

 <code>.container { display: flex; flex-direction: column; column-gap: 10px; }</code>

接下來會發生什麼：

間隙消失了。即使column-gap在容器處於行方向時確實在項目之間添加了空間，但在列方向中它不再起作用。

我們需要使用row-gap來找回它。或者，我們可以使用具有一個值的gap簡寫，它將在兩個方向上應用相同的間隙，因此在兩種情況下都有效。

 <code>.container { display: flex; flex-direction: column; gap: 10px; }</code>

因此，總而言之， column-gap始終垂直工作（假設默認的writing-mode ）， row-gap始終水平工作。這並不取決於Flex 容器的方向。

但是現在看看涉及換行的示例：

 <code>.container { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: center; }</code>

在這裡，如果空間不足以在一行中容納所有內容，我們允許項目使用flex-wrap: wrap在多行上換行。

在這種情況下， column-gap仍然垂直應用於項目之間， row-gap水平應用於兩條Flex 行之間。

這與網格之間有一個有趣的區別。列間隙不一定跨Flex 行對齊。這是因為justify-content: center將項目在其Flex 行內居中。這樣，我們可以看到每條Flex 行都是一個單獨的佈局，間隙獨立於其他行應用。

多列間隙

多列是一種佈局類型，它使內容在多列之間自動流動變得非常容易，就像您在傳統的報紙文章中所期望的那樣。我們設置列數並為每列設置大小。

多列佈局中的間隙與網格或Flexbox 的工作方式不太相同。有三個值得注意的區別：

• row-gap沒有效果，
• column-gap具有非0 的默認值，
• 間隙可以設置樣式。

讓我們逐一分解。首先， row-gap沒有效果。在多列佈局中，沒有行需要分隔。這意味著只有column-gap是相關的（以及gap簡寫）。

其次，與網格和Flexbox 不同，多列佈局中column-gap的默認值為1em（而不是0）。因此，即使根本沒有指定間隙，內容列仍然是視覺上分開的。當然可以覆蓋默認間隙，但這是一個很好的默認值。

以下是示例所基於的代碼：

 <code>.container { column-count: 3; padding: 1em; }</code>

最後，我們可以設置多列佈局中列之間空隙的樣式。我們使用column-rule屬性，它的作用類似於border ：

 <code>.container { column-count: 3; column-gap: 12px; column-rule: 4px solid red; padding: 12px; }</code>

瀏覽器支持

gap在各方面都得到了很好的支持。 caniuse 上有更多信息，但總而言之：

• Flexbox：除了Internet Explorer（即將淘汰）、Opera Mini 和UC Browser for Android 之外， gap在任何地方都受支持。 caniuse 的全球支持率為87.31%。
• Grid：同樣，但我們看到的全球支持率為93.79%。
• 多列：同樣，但在Safari 中不受支持，全球支持率為75.59%。

因此，總的來說， gap屬性得到了很好的支持，並且在大多數情況下，不需要變通方法。

設置Flex 和Grid 中間隙的樣式

設置Flexbox 和CSS Grid 中間隙的樣式將非常有用。令人遺憾的是，它今天在任何地方都不受支持。但好消息是它可能在不久的將來實現。這已經在CSS 工作組中討論過，並且正在Firefox 中開發中。一旦我們在Firefox 中有了有效的實現以及規範提案，它可能會推動其他瀏覽器中的實現。

與此同時，有一些解決方法。

一種方法是為網格容器賦予背景顏色，然後為項目賦予不同的顏色，最後留出間隙以使容器顏色顯示出來。

雖然這有效，但這意味著我們無法使用間隙來在項目之間引入空間。這裡的間隙充當邊框寬度。因此，為了更清晰地視覺上分隔項目，我們需要在項目上使用填充或邊距，這並不理想……正如我們將在下一節中看到的那樣。

我不能只使用margin 或padding 嗎？

是的，在大多數情況下，我們也可以使用margin （和/或padding ）來在佈局元素之間添加視覺空間。但是gap具有多個優點。

首先，間隙是在容器級別定義的。這意味著我們為整個佈局定義它們一次，並且它們在佈局中始終一致地應用。使用邊距需要在每個項目上進行聲明。當項目性質不同或來自不同的可重用組件時，這可能會變得很複雜。

最重要的是， gap只需一行代碼即可默認執行正確操作。例如，如果我們試圖在Flex 項目之間引入一些空間，而不是圍繞它們，則邊距需要特殊情況才能刪除第一個項目之前的額外邊距和最後一個項目之後的額外邊距。使用間隙，我們不需要這樣做。

使用margin: 0 20px在每個Flex 項目上，我們將得到：

但是，在容器上使用gap: 40px ，我們將得到：

同樣在網格佈局中，在容器級別定義間隙比必須在每個項目上定義邊距並考慮應用於網格邊緣的邊距要簡單得多，並且效果更好。

在每個網格項目上使用margin: 20px ：

而改為在網格容器上使用gap: 40px ：

空白空間累加

根據到目前為止所說的所有內容， margin和gap不必是互斥的。事實上，有很多方法可以將佈局的項目進一步分開，並且它們都可以很好地協同工作。

gap屬性只是在佈局容器中框之間創建的空白空間的一部分。 margin 、 padding和對齊方式都可能會增加gap已定義的空白空間。

讓我們考慮一個示例，我們使用給定的寬度、一些間隙、一些內容分佈（使用justify-content ）以及一些邊距和填充來構建一個簡單的Flex 佈局：

 <code>.container { display: flex; gap: 40px; width: 900px; justify-content: space-around; } .item { padding: 20px; margin: 0 20px; }</code>

讓我們假設這段代碼產生以下結果：

現在，讓我們準確地看看項目之間的空白空間是如何創建的：

如我們所見，兩個連續的Flex 項目之間有四種不同類型的空白空間：

• 在兩個連續的項目之間，間隙定義了這些項目之間的最小空間。可能會有更多空間，就像在這種情況下一樣，但永遠不可能有更少的空間。
• 邊距將項目推得更遠，但與間隙不同，它會在所有項目的兩側添加空間。
• 填充在每個項目內部提供一些空間。
• 最後，並且只有在有足夠的剩餘空間的情況下，內容分佈才會生效，並根據space-around值在Flex 行內均勻分佈項目。

調試間隙

讓我們以一個非常貼近我內心的話題結束：DevTools 對調試間隙的支持。總會有出錯的情況，知道DevTools 可以為我們提供支持非常令人欣慰，但我們確實需要知道哪些工具可以幫助我們。

對於gap ，我可以想到兩個可能非常有用的特定功能。

我的間隙是否有效？

除非我們拼寫錯誤gap或提供了無效的值，否則該屬性將始終應用於頁面。例如，這是正確的：

 <code>.some-class { display: block; gap: 3em; }</code>

它不會做任何事情，但它是有效的CSS，瀏覽器並不介意gap不適用於塊佈局。但是，Firefox 有一個名為“Inactive CSS”的功能就是這樣做的：它關心應用於有意義的事物的有效CSS。在這種情況下，Firefox DevTools 在檢查器中顯示警告。

我的間隙在哪裡？

Chrome 和Microsoft Edge 還具有一個非常有用的調試間隙的功能。它是通過微軟和谷歌之間的合作添加的，其目標是在Chromium（支持這兩個瀏覽器以及其他瀏覽器的開源項目）中構建佈局調試工具。在這些瀏覽器中，您可以將鼠標懸停在“樣式”面板中的各個屬性上，並查看它們對頁面的影響。

就是這樣。我希望本文有助於理解CSS 中間隙工作方式的一些細節。

以上是注意'差距”的詳細內容。更多資訊請關注PHP中文網其他相關文章！