CSS样式第一个元素取决于兄弟姐妹的数量

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>

还有这个相关的帖子:CSS可以检测一个元素有多少个孩子？