可以使用哪个CSS选择器来选择包装状态下的flex box项?

I have a display:flex row with 3 columns and flex-wrap is enabled. Between the columns are handle divs. When the columns are wrapped the handle divs should disappear. How can I use the wrap-state as a CSS selector to define attributes for that case, that the flex items are wrapped?

我有一个显示:具有3列的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>

In non-wrapped mode I need to suppress the left margin and in wrapped-mode the top margin and the handles must be suppressed. How to know when being wrapped?

在非包装模式下，我需要抑制左边缘，在包装模式下，顶部边缘和手柄必须被抑制。如何知道何时包装?

1 个解决方案

#1

There is no CSS selector to select specifically wrapped flex items, unfortunately.

不幸的是，没有CSS选择器来选择特定包装的flex项目。

(It's unlikely that any such selector will be added, because it'd create weird circular dependencies. e.g. suppose a flex item wraps because it's too wide for the first line -- and then you select it & restyle it to be skinny, which means it no longer wraps. So then the selector should no longer match -- but then it's wide again, which makes it wrap... etc.)

(不太可能添加任何这样的选择器，因为它会创建奇怪的循环依赖项。例如，假设一个flex项目包装因为第一行太宽，然后你选择它并重新设计为瘦的，这意味着它不再包装了。那么选择器就不再匹配了——但是它又变宽了，这就使它结束了……等等)。