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

Question

我想对多行弹性盒内的每一行进行彩色条纹

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

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

我查看了这个问题，它没有完成条纹，而是“手动”标记 Html 元素以便进行条纹：Zebra striping a flexbox table withwrapping items

我查看了这个问题，它通过以编程方式计算 JavaScript 中的行中断来完成任务。它计算容器中不同

getBoundingClientRect

.top

的数量： 带有 flex-wrap:wrap

的 Flex 容器中的斑马条纹行

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

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

Answer 1

 const calculateNumberOfRowsOfFlexBox = (children: any): number => {
   if (!children) {
      return -1
   }

   const items: any[] = Array.from(children)
   let baseOffset = items[0].offsetTop
   let numberOfRows = 0

   items.forEach(item => {
      if (item.offsetTop > baseOffset) {
         baseOffset = item.offsetTop
         numberOfRows += 1
      }
   })
   return numberOfRows
}

const numberOfRows = calculateNumberOfRowsOfFlexBox(containerRef?.current?.children)

Answer 2

考虑到 CSS 无法知道元素何时换行，脚本化解决方案可能是您最好的选择，除非整个容器中每行的项目数是一致的。然后，您可以将各个项目与 CSS

nth-child

伪类 进行匹配，这可能会产生颜色编码的行。