CSS:如何更改显示网格以使用 CSS 选择器有条件地 flex ？

Question

我有一个网格，其中填充了来自 Vue 中 v-for 循环的元素。另外，我有一个搜索栏，可以根据输入减少网格元素。如果元素数超过 3，那么它看起来不错，但是当我只剩下 2 个元素时，它的间距太大了。因此，我想更改 display: grid;显示: flex ；如果网格中的元素小于 3。

我尝试过使用 CSS 选择器，也许我做错了什么，因为我对编程还很陌生。我知道如何使用 javascript 添加动态类，但是，我想看看是否可以使用纯 CSS。

尝试了以下 css 选择器及其变体:

.grid-container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(290px, 1fr) );
    grid-gap: 3rem;

}

.grid-container:first-child:nth-last-child(n + 2) {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: auto;
    align-content: center;
}

Answer 1

您不能(没有 JavaScript)根据其子元素的数量选择父元素(除了该元素是否具有 0 (:empty) 或更多 ( :not(:empty) child )。

但是，您可以根据他们拥有的 sibling 的数量选择所有 child 。这意味着您不能将 grid 更改为 flex，但您可以一直使用 display:flex 然后更改元素流入的方式flexbox(即通过修改它们的align-self、justify-self 或flex-* 属性)。我无法给出具体示例，因为我看不到您的布局，但我可以在下面给出其工作原理的一般演示。

这里是选择器的分割:

    .container > :first-child:nth-last-child(n + 3),
    .container > :first-child:nth-last-child(n + 3) ~ * 

• .container 选择所有具有“container”类的内容。
• > 选择容器的直接子项(即不是子项的子项)。
• :first-child 过滤直接 child ，这样您就只有第一个 child 。
• :nth-last-child(n + 3) 过滤第一个 child ，只有当它距离容器末尾有三个或更多元素时才会被选中。如果子元素距离其容器末尾少于三个元素，这将给出 0 个元素。换句话说，如果第一个 child 后面有 2 个或更多 sibling ，它只会保留选择。
• ~ * 选择所选元素之后的所有兄弟。

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#clickTarget").addEventListener("click", () => {
    let target = document.querySelector(".container > div:last-child");
    target.parentNode.removeChild(target);
  });
});

/* 0 or more elements */
.container > .child {
  background-color: blue;
}

/* 3 or more elements */
.container > .child:first-child:nth-last-child(n + 3),
.container > .child:first-child:nth-last-child(n + 3) ~ * {
  background-color: green;
}

/* 6 or more elements (must be after the above rule to override it) */
.container > .child:first-child:nth-last-child(n + 6),
.container > .child:first-child:nth-last-child(n + 6) ~ * {
  background-color: orange;
}

<button id="clickTarget">
  Pop Last Element
</button>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>