可以使用哪个CSS选择器来选择处于包装状态的弹性框项目？

Question

我有display:flex3列的行，并且flex-wrap已启用。列之间是手柄divs。包好柱子后，手柄div应当消失。如何使用wrap-state作为CSS选择器来定义弹性项目被包装的情况下的属性？

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项包装起来是因为它对于第一行来说太宽了，然后选择它并重新设置它的样式，使其很瘦，这意味着它不再包装。因此选择器将不再匹配-但它又变宽了，从而使其包装...等）