我在尝试选择flex容器的第一行的最后一个元素和最后一行的最后一个元素时遇到问题。
我的flex容器是flex-wrap: wrap;
,我所有的元素都是flex: auto;
,它们的大小是不同的,通过flex auto我让这些元素像对齐一样放置在我的容器上,并且我的corner元素各自的角都圆了。
但是,问题是,我要隐藏并显示带有事件的元素(例如单击),并且我需要将每次更改的角落元素设置为圆角,如果它具有网格容器,我可以通过nth-child
来选择,因为它永远不会更改列数。但是在flex中,每行元素的数量不同。
我想出了一个Jquery解决方案(下面的链接),但我认为它有点笨拙,可能有一个更聪明的方法或一个我不能使用的简单选择器。
请帮助我提出一个更好的代码,所以不仅仅是我不能很好地利用它。
http://jsfiddle.net/aj1vk0rv/
编辑:
只是改进了一些代码
http://jsfiddle.net/aj1vk0rv/1/
最佳答案
我看不到任何简单的解决方案,但是这种方式有点干净:
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");
关于javascript - CSS flex:行选择器中的最后一项和第一项,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28371650/