Question

我从后端收到了动态数量的物品。

如果项目的数量为奇数，则第一行应该是第一行中唯一的项目。

所有其他应每行显示两次。如果项目数是偶数，则相同-那么在任何行中都没有单个项目。

我强烈认为只有某种方式可以使用CSS来做到这一点（我可以轻松地使用JS解决此问题，但更喜欢使用CSS方法），但我一直无法找到正确的组合。

HTML：

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
</div>

CSS：

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}
.col:first-child { // should only hit for an odd amount of items
  flex: 0 0 100%;
}

Codepen

Answer 1

是的，使用以下CSS可以实现：

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%; // should only hit for an odd amount of items
}

<p>Even</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
</div>

<p>Odd</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

与此相关的帖子：Can CSS detect the number of children an element has?

CSS样式的第一个元素，取决于同级元素的数量

1 个答案: