有没有一种简单的方法可以知道包装的 Flexbox 中有多少行？

Question

我想在多行弹性框中为每一行着色

.container{ 
    display:flex;
    flex-flow: row wrap;
}

有没有人发现一种简单的方法来确定弹性盒的行数？

我查看了这个没有完成条带化的问题，而是“手动”标记 Html 元素以进行条带化：Zebra striping a flexbox table with wrapping items

我查看了这个问题，它通过以编程方式计算 JavaScript 中的换行符来完成任务。它统计容器中不同getBoundingClientRect.top的数量：zebra striping rows in a flex container with flex-wrap:wrap

我不介意 JS，但不幸的是，这个解决方案还需要观察页面布局和容器内每个包装项目的内容的变化。

是否有不需要“手动”监控布局和内容的解决方案？

Answer 1

考虑到CSS has no way of knowing when an element wraps，脚本解决方案可能是您最好的选择，除非每行的项目数在整个容器中是一致的。然后，您可以将单个项目与CSS nth-child pseudo-classes 匹配，这可能会产生颜色编码的行。