CODEWITHSUNDEEP
javascriptjqueryhtmlcssflexbox
TheLinthus
TheLinthus

Reputation: 193

CSS flex: last and first item in a row selector

I'm having a problem trying to select the last element of the first row and the first element of the last row of a flex container.

My flex container is flex-wrap: wrap; and all my elements are flex: auto; and they have different sizes, and by flex auto I let the elements fit like justify on my container, and my corner elements have their respective corner rounded.

But, the problem is, I'm hiding and showing the elements with events (like on click), and I need to set the corners elements rounded every time it changes, if it has a grid container I could pick by nth-child because it never change the number of columns. But in the flex have a different number of elements per row.

I came up with a Jquery solution (link down bellow), but i think it's to ogle and big, may have a smarter way or a simple selector I cant use.

Please help me to came up with a better code, so not just me cant make a good use of it.

http://jsfiddle.net/aj1vk0rv/

edit: Just improved a bit the code http://jsfiddle.net/aj1vk0rv/1/

Upvotes: 18

Views: 7418

Answers (1)

Marcos Alexandre Sedrez
Marcos Alexandre Sedrez

Reputation: 537

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");

Upvotes: 1

Related Questions