带有分页符的Flex框不起作用

Question

我在此codepen中有示例设置。 我试图以一种不会在每页底部切断内容的方式在网格中打印动态图像。使用page-break-before似乎是做事的最简单方法。

所以我每隔5个列插入一个中断项

<div class="page-break"></div>

和以下CSS

@media all {
  .page-break { display: none; }
}

@media print {
  .page-break { display: block; page-break-before: always; }
}

但这似乎没有效果。我找不到任何明确声明它的地方，但是由于此属性不适用于浮动元素，因此我假设它也不适用于flexbox。

我还能如何实现所需的功能： 能够从未知数量的项目动态创建5列宽的网格，该网格将与page-break属性一起使用。