哪些CSS选择器可以用于选择包装状态下的弹性框项目？ [英] Which CSS selector can be used to select a flex box item in wrapped state?

问题描述

我有一个显示：flex 有3列的行和 flex-wrap 启用。在列之间是句柄 div s。当列包装时， div s应该会消失。

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?

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?

推荐答案

不幸的是，没有CSS选择器可以选择专门封装的flex项目。

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

（这不太可能会添加任何这样的选择器，因为它会创建奇怪的循环依赖，例如假设一个flex项目包装，因为它的第一行太宽了 - 然后你选择它&restate它是瘦的，这意味着它不再包装所以然后选择器应该不再匹配 - 但是它又宽，这使它包装...等）。

(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.)

这篇关于哪些CSS选择器可以用于选择包装状态下的弹性框项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！