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

Question

我想对多行flexbox中的每一行进行彩色条纹

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

有没有人发现一种确定flexbox行数的简单方法？

我看了这个没有完成条纹化的问题，而是＃34;手动＆＃34;标记Html元素以便条带化：Zebra striping a flexbox table with wrapping items

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

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

有没有人有一个不需要＆＃34;手动＆＃34;监控布局和内容？

Answer 1

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