如何消除包裹的 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中文网其他相关文章！