css - 如何在 flexbox 设计中定位中断发生之前的最后一个元素？

Question

想象一下这个布局:

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

这是一个 flexbox 设计，并且 - 如果屏幕缩小 - 将看起来像这样:

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

如果屏幕太窄而无法显示两个相邻的框，则会变成一组 4 行。

到目前为止一切顺利。

我正在寻找一种方法来定位上行中的最后一个元素，无论 flexbox 当前如何调整以适应其环境。

自然而然地，我想到了 CSS 伪类，但除了典型的伪类之外，我找不到任何东西，例如 :last-child 和 :last-of-type 或 :nth-child，这在这种情况下无济于事。

问题

有没有办法只用 CSS 来做到这一点？如果是，如何？

Answer 1

您可以想象在后续元素包装后使用媒体查询来定位第二个元素。除非该选项，否则 CSS 是不可能的。

包装不是 CSS 跟踪的行为。例如，一个容器不知道它的 child 何时换行。因此，无法根据包装场景使用 CSS 定位元素(媒体查询除外，如上所述)。

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