如何根据 CSS 中元素的数量来改变元素的排列方式？

Question

我有一个这样的 CSS。

我想根据卡片的元素个数动态改变卡片的位置到中心或右对齐：

.section {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

例如，当卡片元素的数量为3或更少时，我想像这样将元素居中：

.section {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
  justify-content: center;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

当卡片元素数量为4个或更多时，我想像这样将元素左对齐或右对齐：

.section {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
  /* justify-content: left; OR*/
  justify-content: right;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

<div class="section">
  <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>
</div>

我尝试使用 Flex、Grid 来实现这些，但我做不到。是否可以使用 CSS、Flexbox 或 Grid Layout 来实现上述操作？

Answer 1

使用额外的包装器，您可以这样做：

.wrapper {
  text-align: center;
  background-color: #ffabaf;
  max-width: 80vw;
  margin:10px;
}

.section {
  display: inline-flex;
  flex-wrap: wrap;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

<div class="wrapper">
  <div class="section">
    <div class="card"></div>
  </div>
</div>


<div class="wrapper">
  <div class="section">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

<div class="wrapper">
  <div class="section">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

如果你真的想用元素的数量来控制它，你可以考虑nth-child() 和使用边距居中：

.section {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
  margin: 10px;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}
/* 1 */
.card:first-child:nth-last-child(1) {
  margin:auto;
}
/* 2 */
.card:first-child:nth-last-child(2) {
  margin-left:auto;
}
.card:last-child:nth-child(2) {
  margin-right:auto;
}
/* 3 */
.card:first-child:nth-last-child(3) {
  margin-left:auto;
}
.card:last-child:nth-child(3) {
  margin-right:auto;
}

<div class="section">
  <div class="card"></div>
</div>

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
</div>

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

另一种语法如下：

.section {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
  margin: 10px;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

.card:first-child:nth-last-child(1),
.card:first-child:nth-last-child(2),
.card:first-child:nth-last-child(3){
  margin-left:auto;
}
.card:last-child:nth-child(1),
.card:last-child:nth-child(2),
.card:last-child:nth-child(3){
  margin-right:auto;
}

<div class="section">
  <div class="card"></div>
</div>

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
</div>

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Answer 2

您无法确定一个元素在 css 中有多少个子元素，因此您需要一些 javaScript。在以下示例中，justify: center; 样式位于其自己的类 few-items-layout 中。该脚本正在 onLoad 执行，并在 .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>

CSS

.cards {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
}

.cards.few-items-layout {
  justify-content: center;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

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);
  }
})();