18

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/

TheLinthus
  • 193
  • 1
  • 6
  • 2
    That's a very good question. We'd require some pseudo class to do this i.e. `:main-axis-first` and `:main-axis-last` or something similar. This would be great, but unfortunately something like this doesn't exist in the specification. You can suggest it though to the guys working on it... – Robert Koritnik Feb 09 '15 at 19:58
  • You could have it create a new element for each row instead of making one box and then use `:first-child`. – Rorschach120 Mar 26 '15 at 16:19
  • even though this question is slight different the answer in http://stackoverflow.com/questions/28580851/which-css-selector-can-be-used-to-select-a-flex-box-item-in-wrapped-state still fits here – Luizgrs Mar 30 '15 at 14:30
  • is there any reason this would not work http://jsfiddle.net/aj1vk0rv/4/ . I took out all the js and just tweeked the css a bit , and then just resized the window to check the style for it. I might not be understanding what you are asking for though –  Mar 30 '15 at 17:40
  • ...i added the js for the buttons http://jsfiddle.net/aj1vk0rv/5/ –  Mar 30 '15 at 17:46
  • please look at my solution. It seems to work like a charm. – Ahmad Ismail Jun 05 '15 at 14:49

1 Answers1

1

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");
Marcos Alexandre Sedrez
  • 537
  • 3
  • 13