如何在 Flex 項目換行時刪除底部邊距？

在Flex 項目換行時刪除邊距

使用Flexbox 時，通常需要刪除一行中最後一個項目的底部邊距，尤其是在建立時無法定位特定項目的動態清單。這可能會導致不同行中的項目之間的間距不均勻。

在這種情況下，flexbox 不提供根據行中項目的位置修改 CSS 樣式的固有功能。但是，還有其他方法可以實現所需的效果。

使用間隙屬性

CSS 引入了間隙屬性，可用於在 Flex 項目之間添加空間。當設定為適當的值時，它可以有效地去除每行最後一項的邊距。但是，舊版瀏覽器不支援此屬性。

.tags {
  gap: 5px;
}

調整邊距

另一種方法是修改 li 元素的下邊距，但僅當它是一行。為此，我們可以利用 JavaScript 根據元素在其容器中的位置動態調整樣式。

const tags = document.querySelectorAll('.tags li');
tags.forEach((tag, index) => {
  if (index % 4 === 3) {
    tag.style.marginBottom = 0;
  }
});

使用偽元素

偽元素也可以用於插入每行最後一項之前或之後的不可見元素，並向其應用樣式，例如設定負邊距以取消li 元素的邊距。

.tags li:last-of-type::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-bottom: -5px;
}

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