在Flexbox设计中，如何在断裂发生之前将最后一个元素作为目标？

Question

想象一下这种布局：

[BOX]  [BOX]  [BOX]
[       BOX       ]

这是一个flexbox设计，并且–如果屏幕缩小–会看起来像这样：

[  BOX  ] [  BOX  ]
[       BOX       ]
[       BOX       ]

如果屏幕太窄而无法显示甚至两个相邻的框，那么它将变成4行。

到目前为止很好。

无论弹性框当前如何适应其环境，我都在寻找一种方法来定位上一行的最后一个元素。

自然地，我想到了CSS伪类，但是除了典型的:last-child和:last-of-type或:nth-child之外，我找不到其他东西，这对这种情况。

问题

有没有一种方法可以完全在CSS中做到这一点？如果是，怎么办？

Answer 1

可以想象，在后续项包装之后，可以使用媒体查询来定位第二项。除非使用该选项，否则CSS不可能实现。

包装不是CSS跟踪的行为。例如，一个容器不知道何时包装其子容器。因此，无法使用基于包装方案的CSS定位项目（如上所述，媒体查询除外）。

此处有更多详细信息：Make container shrink-to-fit child elements as they wrap

Answer 2

您无法检测和定位弹性项目，但可以在弹性容器中添加：pseudo并将其放置在右上角。
这可能无济于事：您想对上一行的那一端做什么？

其他处理方式：

• flex-direction: row-reverse 将从右到左显示弹性项目。 您现在必须定位第一个项目。这会弄乱使用键盘的人员的链接和表单字段的选项卡顺序，这会导致可访问性问题。但是，如果没有表单和/或数十个链接，则可以从右向左制表块。
• flex-wrap: wrap-reverse从下至上环绕。右上角现在是您的最后一个弹性项目，但第一行在底部有2-4个项目，而顶部可能只有一个项目。可能不是您期望的布局。同样，使用键盘的人也会弄乱链接和表单字段的制表顺序，这在这种情况下会导致巨大的可访问性问题（焦点将跳到下面的2个屏幕，并且将在新的2个屏幕上跳高之前返回……哎呀）。< / li>
• 网格布局和自动填充/自动调整以及对宽度的限制可以让您猜测第一行中哪个网格项目是最后一个，但是您丢失了Flexbox提供的flex: grow shrink basis%。

Answer 3

您可以结合媒体查询使用nth-of-type()伪选择器。 检出：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type