如何在 Flex 項目換行時刪除最後一行不需要的邊距？

在Flex 專案換行時刪除邊距

使用Flexbox 版面時，可能會遇到最後一行的狀況容器中的Flex 專案有一個不需要的底部邊距，因為最後一個項目從其CSS 類別繼承了它。當標籤清單是動態的時，這變得具有挑戰性，並且根據索引來定位特定項目（即 Item-13、Item-14 等）是不切實際的。

解決方案

Flexbox 沒有提供直接的方法來消除最後一行項目的邊距。但是，還有一些替代方法：

1。使用 Gap 屬性

在現代瀏覽器中，CSS 間隙屬性可用於在 Flex 專案之間建立空間。透過設定間隙值，您可以自動在所有彈性項目之間新增空間，從而無需邊距。

.container {
  ...
  gap: 5px;                          /* added */
}

2.基於行的選擇

如果標籤清單是另一個已知高度的容器的子級，您可以使用CSS nth-child( ) 選擇器選擇性地刪除最後一行的下邊距：

.container .tags li:nth-child(12n) {
  margin-bottom: 0;
}

3.計算寬度子項

在某些情況下，可能可以計算每個子項的寬度並將其加到 Flex 容器中。這將導致容器均勻地包裹子級，從而無需顯式邊距。

.container {
  ...
  display: flex;
  flex-wrap: wrap;
  width: 100%;  /* width based on child count and their individual widths */
}

.tag {
  width: 20%;
}

注意： 現代瀏覽器支援間隙屬性，包括 Chrome、Firefox 和野生動物園。在不支援的瀏覽器中它會回落到 0。

以上是如何在 Flex 項目換行時刪除最後一行不需要的邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！