CSS: 如何为列表中的每个中间元素添加边距？

Question

我有一个 <li> 元素的动态列表。该列表应显示 3 个项目，设计为每行卡片，然后换行到下一行。卡片之间应该有间距（边距）。但是该行中的第一张卡片不应与左侧有间距，而该行中的最后一张卡片不应与右侧有间距。

所以这就是我想要的（两侧的卡片触及列表的边界）：

这就是我想要避免的（卡片和列表两侧之间的间距）：

理想情况下，它应该是响应式的，所以在较小的屏幕上我每行 2 张卡片，然后每行 1 张卡片。

所以现在我的代码如下所示：

  ul{
        display: flex;
        flex-wrap: wrap;
        
    }
    li {
        width: 33.3%;
        padding: 15px 15px;
    }

我不能将 flex 与 <li> 一起使用，只能给它 justify-content: space-between; 因为可能会出现列表中只有 2 个项目的情况，我不想让它们跳转到页面的相对两侧。

我尝试使用 li:nth-child(2n) 为每张偶数卡片提供填充。但是因为我为每张卡片指定了 width: 33.3%;（所以它会占用可用页面宽度的 1/3），填充会压缩中间卡片并使其变窄。

ul{
    display: flex;
    flex-wrap: wrap;
    
}
li {
    width: 33.3%;
    padding: 15px 0px;
}

/*
li:nth-child(2n){
    width: 33.3%;
    padding: 15px 30px;
}

此外，我很快意识到这是错误的方法，因为我需要保证每张中间牌（2、5、8、11 等），而不是每张偶数牌。

你有什么建议？

Answer 1

使用gap，例如：

ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;        
}

gap 基本上在元素之间放置了一个间隙。因此，不会将 padding/spacing 添加到 above/below 或添加到 left/right 除非有相邻项。

如果您只需要列之间的间隙，请使用 column-gap 或 row-gap（如果仅在行之间）。

CSS: 如何为列表中的每个中间元素添加边距？

CSS: How to add a margin to each middle element in a list?

html

css

frontend

responsiveness