CSS flex：行选择器中的最后一项和第一项

Posted 2023-03-05

【中文标题】CSS flex：行选择器中的最后一项和第一项

【英文标题】：CSS flex: last and first item in a row selector

【发布时间】：2015-04-06 22:37:03

【问题描述】：

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

我的 flex 容器是 flex-wrap: wrap;，我的所有元素都是 flex: auto;，它们有不同的大小，通过 flex auto，我让元素像 justify 一样适合我的容器，并且我的角元素有各自的圆角。

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

我想出了一个 Jquery 解决方案（链接在下面），但我认为它是个大问题，可能有一个更聪明的方法或一个我不能使用的简单选择器。

请帮我想出一个更好的代码，所以不仅仅是我不能很好地利用它。

http://jsfiddle.net/aj1vk0rv/

编辑： 只是改进了一点代码 http://jsfiddle.net/aj1vk0rv/1/

【问题讨论】：

这是一个非常好的问题。我们需要一些伪类来执行此操作，即 :main-axis-first 和 :main-axis-last 或类似的东西。这会很棒，但不幸的是，规范中不存在这样的东西。你可以向从事它的人推荐它......

您可以让它为每一行创建一个新元素，而不是制作一个框，然后使用:first-child。

即使这个问题略有不同，***.com/questions/28580851/… 中的答案仍然适合这里

有什么原因这不起作用jsfiddle.net/aj1vk0rv/4。我取出了所有的 js，稍微调整了一下 css，然后调整了窗口的大小来检查它的样式。我可能不明白你在问什么

...我为按钮添加了 js jsfiddle.net/aj1vk0rv/5

【参考方案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");