html - 如何根据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>

比如当card元素个数为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>