Html 如何根据CSS中元素的数量更改元素的排列？

我有一个像这样的CSS

我希望根据卡的元素数量动态地将卡的位置更改为中心或右对齐：

部分{
显示器：flex；
柔性包装：包装；
背景色：#ffabaf；
最大宽度：80vw；
}
.卡片{
宽度：90px；
高度：90px；
背景色：#AFBB；
边框：3倍实心；
}

---

使用额外的包装器，您可以执行以下操作：

.wrapper{
文本对齐：居中；
背景色：#ffabaf；
最大宽度：80vw；
利润率：10px；
}
.科{
显示：内联flex；
柔性包装：包装；
}
.卡片{
宽度：90px；
高度：90px；
背景色：#AFBB；
边框：3倍实心；
}

---

您无法确定一个元素在css中有多少子元素，因此需要一些javaScript。在以下示例中，

justify:center样式在其自己的类中
少数项布局
。脚本在加载时执行，并在
.cards
容器上设置类，只要其子类的数量为3或更少：

HTML

<section class="cards">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
</section>

javaScript

(function setLayoutClass() {
  let fewItemsLayoutClass = 'few-items-layout',
      cardsContainer = document.querySelector('.cards'),
      cardsAmount = document.querySelectorAll('.card').length;

  cardsContainer.classList.remove(fewItemsLayoutClass);

  if(cardsAmount <= 3) {
    cardsContainer.classList.add(fewItemsLayoutClass);
  }
})();

（函数setLayoutClass（）{
让fewItemsLayoutClass=‘少量项目布局’，
cardsContainer=document.querySelector（“.cards”），
cardsAmount=document.queryselectoral（'.card'）.length；
cardsContainer.classList.remove（fewItemsLayoutClass）；
如果（cardsAmount似乎你想根据它的孩子来改变父母的风格，而现在没有
javascript
，这是不可能的，看看这里你可以使用
：独生子女
，而不是
：第一个孩子：最后一个孩子
@OriDrori true，但我想保持相同的视觉模式，这样我们就可以清楚地看到诀窍从1到3我喜欢第二个代码段：非常有趣的方法结合了这样的子选择器。：-）谢谢你给出了一个非常好的答案。我首先考虑了代码段方法，以获得更简洁的描述。但是，当最新版本的Firefox中有四个以上的代码段时，该代码段不起作用（带或不带
justify content
属性）。我需要其他样式吗？我拍摄了此行为的屏幕截图：
(function setLayoutClass() {
  let fewItemsLayoutClass = 'few-items-layout',
      cardsContainer = document.querySelector('.cards'),
      cardsAmount = document.querySelectorAll('.card').length;

  cardsContainer.classList.remove(fewItemsLayoutClass);

  if(cardsAmount <= 3) {
    cardsContainer.classList.add(fewItemsLayoutClass);
  }
})();