Which CSS Selector Can Be Used to Select a Flex Box Item in Wrapped State

Which CSS selector can be used to select a flex box item in wrapped state?

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

CSS flex: last and first item in a row selector

I don't see any simple solution, but this way is a little bit clean:

var fun = function () {
var flex = $(".container");
var cw = flex.width(); // container width
var ch = flex.height(); // container height

var tl = $(".ui-widget:visible:first");
var tr = $(".ui-widget:visible").closestToOffset({left: cw-20, top: -20});
var bl = $(".ui-widget:visible").closestToOffset({left: 0+20, top: ch+20});
// those '20's are to to throw away from the others elements
var br = $(".ui-widget:visible:last");

$(".ui-widget").removeClass(function (index, css) {
    return (css.match(/\ui-corner-\S+/g) || []).join(' ');
});

tl.addClass("ui-corner-tl");
tr.addClass("ui-corner-tr");
bl.addClass("ui-corner-bl");
br.addClass("ui-corner-br");

Related Topics