定位多行弹性容器中每一行的第一项

Tim*_*Tim 8 css flexbox

我有一个多行 flexbox 容器display: flex; flex-wrap: wrap。如何将样式或 css 类应用于每行的第一项?

我唯一能想到的是使用 Javascript 来迭代项目并手动应用/删除类。不过,我真的很喜欢纯 css 解决方案。

我不知道有多少项目会提前在 flex box 中,或者它们的宽度最终会是多少。

Mic*_*l_B 5

这在 CSS 中是不可能的。

当每行中的项目数量不可预测时,定位多行 flex 容器的每一行中的第一项超出了 CSS 的能力,因为每行中的第一项是任意的。它可以是最先放置的任何项目。

充其量,CSS 可以匹配确定的模式。如果没有模式,您将需要另一种技术。

试试 JavaScript。

CSS Grid Layout 也有同样的限制: