Css 证明内容合理性的其他方法：间隔？

我正在尝试重构以下类中的一些CSS：

.cards-list {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.cards-list .card-item {
    margin-bottom: 15px;
    flex-basis: 49%;
    padding: 30px 45px;
}

.cards-list .card-item-small {
    flex-basis: 25%;
}

我的任务是在不创建新的CSS类的情况下，只验证.card项的内容。 如您所见，卡片列表中存在卡片项和卡片项小值，并且“对齐内容”属性仅适用于继承器元素。解决此问题的一种方法是创建一个新类，该类仅应用于卡项目smalls周围的容器，并具有以下属性：

.specific-cards {
    justify-content: unset;
}

但是，这打破了不创建新类的规则。我尝试的另一个选项是应用伪理由：

.cards-list {
    flex-direction: row;
    align-items: flex-start;
    //justify-content: space-between; //REMOVED
}

.cards-list .card-item {
    margin-bottom: 15px;
    flex-basis: 49%;
    padding: 30px 45px;
    margin-left: 3.5px; //ADDED
    margin-right: 3.5px; //ADDED
}

但这也有问题，因为卡片项目的外部有不需要的空间。

---

我的问题是，如何在没有不必要的副作用的情况下实现目标？

您可以使用

边距

代替

对齐项目

和/或

调整内容

例如：

不确定你们是在寻找中间的空间还是周围的空间，所以我把两个边距都放在了备选方案中

div div{
框大小：边框框；
边框：实心；
}
.卡片清单{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：flex start；/*不会喷洒整行*/
}
.卡片列表.卡片项目{
边缘底部：15px；
弹性基准：49%；
填充：30px 45px；
保证金：0自动15px；
}
.卡片列表.卡片项目小{
弹性基准：25%；
}
分区：以前{
内容：attr（类）；
}
.cards-list.bis.卡片项目{
利润率：0.15px；
/*重置用于演示*/
颜色：深蓝色；
}
.cards-list.bis.卡片项：第n个子项（2n）{
左边距：自动；
}

您可以使用

边距

代替

对齐项目

和/或

对齐内容

例如：

不确定你们是在寻找中间的空间还是周围的空间，所以我把两个边距都放在了备选方案中

div div{
框大小：边框框；
边框：实心；
}
.卡片清单{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：flex start；/*不会喷洒整行*/
}
.卡片列表.卡片项目{
边缘底部：15px；
弹性基准：49%；
填充：30px 45px；
保证金：0自动15px；
}
.卡片列表.卡片项目小{
弹性基准：25%；
}
分区：以前{
内容：attr（类）；
}
.cards-list.bis.卡片项目{
利润率：0.15px；
/*重置用于演示*/
颜色：深蓝色；
}
.cards-list.bis.卡片项：第n个子项（2n）{
左边距：自动；
}

换句话说，您希望

.cards list

在包含

时使用
对齐内容：在
之间的空格。card item
，但在包含
时不使用。card item small
？您所说的是正确的。换句话说，您希望
.cards list
在包含
.card item
时使用
对正内容：在
之间使用空格，但在包含
时不使用空格。card item small
？您所说的是正确的。谢谢。我使用
：not（：first child）{}
为卡片项目设置左边距，然后设置
左边距：0卡片上的小物品。谢谢。我使用
：not（：first child）{}
为卡片项目设置左边距，然后设置
左边距：0卡片上的小项目。