CSS flex：行选择器中的最后一项和第一项 [英] CSS flex: last and first item in a row selector

问题描述

我在尝试选择第一行的最后一个元素和Flex容器的最后一行的第一个元素时遇到问题。

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.

我的flex容器是 flex-wrap：wrap; ，我的所有元素都是 flex：auto; ，它们有不同的大小，并且flex auto我让元素在我的容器上合适，并且我的角元素各自的角都是圆角的。

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.

但问题是，我隐藏并显示带有事件的元素（比如单击），我需要在每次更改时设置圆角元素，如果它有一个网格容器，我可以选择 nth-child 因为它永远不会改变列数。但是在flex中每行有不同数量的元素。

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.

我想出了一个Jquery解决方案（链接下来），但我认为这是ogle和大，可能有一个更聪明的方式或一个我无法使用的简单选择器。

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/

编辑：
只是改进了一下代码
http://jsfiddle.net/aj1vk0rv/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");

这篇关于CSS flex：行选择器中的最后一项和第一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！