css - 哪个 CSS 选择器可用于选择处于包装状态的 flex box 元素？

Question

我有一个包含 3 列的 display:flex 行，并且启用了 flex-wrap。列之间是句柄 div。当列被换行时，句柄 div 应该消失。我如何使用 wrap-state 作为 CSS 选择器来定义这种情况的属性，即 flex 元素被包装？

section {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgray;
}
section * {
  margin: 1ex;
  background-color: white;
}
section * ~ * {
  margin-left: 0;
}
.handle {
  width: 1ex;
  background-color: gray;
}
aside, article {
  flex: 1;
  min-width: 5em;
}
#wide {
  width: 30em;
}
#narrow {
  width: 10em;
}

<section id="wide">
  <aside>
    left
  </aside>
  <div class="left handle"></div>
  <article>
    middle
  </article>
  <div class="right handle"></div>
  <aside>
    right
  </aside>
</section>
<hr>
<section id="narrow">
  <aside>
    top
  </aside>
  <div class="left handle"></div>
  <article>
    middle
  </article>
  <div class="right handle"></div>
  <aside>
    bottom
  </aside>
</section>

在非环绕模式下，我需要抑制左边距，而在环绕模式下，必须抑制上边距和句柄。如何知道何时被包裹？

Answer 1

不幸的是，没有 CSS 选择器来选择专门包装的 flex 元素。

(不太可能添加任何这样的选择器，因为它会产生奇怪的循环依赖。例如，假设一个 flex 元素换行，因为它对于第一行来说太宽了——然后你选择它并将它重新设计为瘦的，这意味着它不再换行。所以选择器应该不再匹配——但它又变宽了，这使得它换行……等等。)