时间戳

首页 > 解决方案 > 如何根据 CSS 中元素的数量来改变元素的排列方式？

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

问题描述

我有一个这样的 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 来实现上述操作？

标签： htmlcssflexboxcss-grid

解决方案

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

.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>

推荐阅读