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

Question

我在这个codepen中有我的示例设置。我试图以一种不会在每页底部截断的方式在网格中打印动态数量的图像。usingspage-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 属性一起使用。

标签： htmlcssflexbox