Which CSS selector can be used to select a flex box item in wrapped state?
css, css-selectors, flexbox
Solution
There is no CSS selector to select specifically wrapped flex items, unfortunately.
(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.)
Problem
I have a `display:flex` row with 3 columns and `flex-wrap` is enabled. Between the columns are handle `div`s. When the columns are wrapped the handle `div`s 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?