哪个 CSS select 或可用于 select 包裹状态的弹性盒子项目?
Which CSS selector can be used to select a flex box item in wrapped state?
我有一个包含 3 列的 display:flex
行并且启用了 flex-wrap
。列之间是句柄 div
s。当列被换行时,句柄 div
s 应该消失。我如何使用 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>
在非环绕模式下,我需要抑制左边距,而在环绕模式下,必须抑制上边距和手柄。如何知道什么时候被包裹?
很遗憾,没有 CSS select 或 select 专门包装的 flex 项目。
(不太可能添加任何此类 selector,因为它会产生奇怪的循环依赖关系。例如,假设一个 flex 项目换行,因为它对于第一行来说太宽了——然后你 select 它 & 将它重新设计成瘦的,这意味着它不再包裹。所以 selector 应该不再匹配——但它又变宽了,这使得它包裹......等等。)
我有一个包含 3 列的 display:flex
行并且启用了 flex-wrap
。列之间是句柄 div
s。当列被换行时,句柄 div
s 应该消失。我如何使用 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>
在非环绕模式下,我需要抑制左边距,而在环绕模式下,必须抑制上边距和手柄。如何知道什么时候被包裹?
很遗憾,没有 CSS select 或 select 专门包装的 flex 项目。
(不太可能添加任何此类 selector,因为它会产生奇怪的循环依赖关系。例如,假设一个 flex 项目换行,因为它对于第一行来说太宽了——然后你 select 它 & 将它重新设计成瘦的,这意味着它不再包裹。所以 selector 应该不再匹配——但它又变宽了,这使得它包裹......等等。)