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

Posted 2023-03-06

【中文标题】哪个 CSS 选择器可用于选择处于包裹状态的弹性框项目？

【英文标题】：Which CSS selector can be used to select a flex box item in wrapped state?

【发布时间】：2015-04-19 06:59:08

【问题描述】：

我有一个包含 3 列的 display:flex 行，并且启用了 flex-wrap。列之间是句柄divs。当列被包装时，句柄divs 应该消失。我如何使用 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>

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

【问题讨论】：

这是我希望我们有 Element Queries...

【参考方案1】：

很遗憾，没有 CSS 选择器可以选择专门包装的 flex 项目。

（不太可能添加任何这样的选择器，因为它会创建奇怪的循环依赖关系。例如，假设一个弹性项目包装，因为它对于第一行来说太宽了——然后你选择它并将它重新设置为瘦的，这意味着它不再换行。所以选择器应该不再匹配——但随后它又变宽了，这使得它可以换行......等等）

【讨论】：

这是参考文献的标准问题。如果您引用一个标题，则标题可能会移动到下一页，只需引用它即可。这些问题在很久以前就被 TeX 解决了。

@ceving 你能发布一个代码或文档的链接来解释这个问题的解决方案