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

问题描述

我有一个 display:flex 行，有 3 列，并且 flex-wrap 已启用.列之间是句柄 divs.当列被包裹时，句柄 divs 应该消失.我如何使用 wrap-state 作为 CSS 选择器来定义这种情况下的属性，即 flex 项目被包裹?

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 项目因为第一行太宽而被换行——然后你选择它并重新设置它的样式瘦，这意味着它不再换行.所以选择器应该不再匹配 - 但随后它又变宽了，这使得它换行......等等)

(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屋！