javascript - CSS flex: last and first item in a row selector - Stack Overflow

admin管理员组

文章数量:1414628

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.

/

edit: Just improved a bit the code /

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/aj1vk0rv/

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

• javascript
• jquery
• html
• css
• flexbox

Share Improve this question Follow edited Feb 10, 2015 at 12:21 TheLinthus asked Feb 6, 2015 at 17:43 TheLinthusTheLinthus 19311 silver badge66 bronze badges 5

• 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 Commented Feb 9, 2015 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 Commented Mar 26, 2015 at 16:19
• even though this question is slight different the answer in stackoverflow./questions/28580851/… still fits here – Luizgrs Commented Mar 30, 2015 at 14:30
• is there any reason this would not work jsfiddle/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 – user1752532 Commented Mar 30, 2015 at 17:40
• ...i added the js for the buttons jsfiddle/aj1vk0rv/5 – user1752532 Commented Mar 30, 2015 at 17:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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");

本文标签： javascriptCSS flex last and first item in a row selectorStack Overflow