如何消除包裹的 Flex 商品上不需要的底部邊距？

如何在換行後刪除Flex 項目的邊距

在Flexbox 中，您可能會遇到換行行中的最後一個項目保留底部邊距的情況，從而導致不必要的間隙。當使用 Flexbox 動態產生樣式標籤清單時，定位特定項目（例如「item-13」）是不切實際的。

幸運的是，Flexbox 提供了解決此問題的選項，而無需訴諸手動定位：

更新（2021）：現代瀏覽器支援Flexbox 的間隙屬性。此屬性增加了彈性項目之間的水平和垂直間距。要刪除底部邊距，只需將間隙設定為您想要的值：

.tags {
  gap: 5px;
}

舊版瀏覽器（2021 年之前）：

使用nth-child :

nth-child()選擇器可讓您根據元素在清單中的位置來定位元素。但是，由於最後一項的位置可能會有所不同，因此此方法對於動態清單可能不可靠。

使用最後一個類型：

更穩健的方法是在 nth-child() 選擇器之後使用 :last-of-type 。這可確保您定位到其容器內特定類型的最後一個元素：

li:nth-child(n+0):last-of-type {
  margin-bottom: 0;
}

修改顯示：

或者，您可以更改您的內部列表元素從flex 到inline-flex 。預設情況下，此選項會刪除所有邊距並新增項目之間的間距。

.tag {
  display: inline-flex;
  margin: 0 5px 5px; /* Unnecessary now */
}

以上是如何消除包裹的 Flex 商品上不需要的底部邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！