在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 跟踪的行为。例如，容器不知道其子级何时换行。因此，无法根据包装场景使用 CSS 来定位项目（如上所述，媒体查询除外）。