如何让 `page-break-inside: Avoid` 与 `flex-wrap: wrap` 一起工作

Posted 2023-03-07

【中文标题】如何让 `page-break-inside: Avoid` 与 `flex-wrap: wrap` 一起工作

【英文标题】：How to get `page-break-inside: avoid` to work nicely with `flex-wrap: wrap`

【发布时间】：2013-12-22 20:49:36

【问题描述】：

我正在尝试让page-break-inside: avoid 以使用多行弹性框布局的表单（使用flex-wrap: wrap）工作。目的只是为了避免在打印时打断表格问题。

这适用于单行 flexbox 或没有 flexbox。见http://jsfiddle.net/MartijnR/nSE3P/1/show/的打印预览（注意没有应用flexbox类）

但是，当使用多行弹性框时，它似乎忽略了page-break-inside: avoid css 规则。查看http://jsfiddle.net/MartijnR/nSE3P/2/show/的打印预览（注意我在section元素中添加了flexbox类）

<form>
   <section class="flexbox">
        <label class="flex-100">
            <input type="text" />
        </label>
        <label class="flex-100">
            <input type="text" />
        </label>
        <!-- etc -->
        <label class="flex-100">
            <input type="text" />
        </label>
        <label class="flex-100">
            <input type="text" />
        </label>
    </section>
</form>

body, div, article, section, label 
    position: relative;

.flexbox 
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -webkit-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;

label 
    display: block;
    margin: 10px 0;
    position: relative;

.flex-100 
    min-height: 300px;
    border: 1px solid black;
    min-width: 80%;
    -webkit-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;

input 
    display: block;

@media print 
    label 
        page-break-inside: avoid;
        -webkit-region-break-inside: avoid;
    

我在最新的 Chrome 和 IE11 中都进行了尝试，两者都表现出相同的行为，这让我认为这不是浏览器错误。 （FF 还不支持多行 flexbox，所以要到明年年初才能在那里工作）

有人知道如何让flex-wrap: wrap flexbox 布局与page-break-inside:avoid 很好地配合使用吗？

PS。我知道在示例代码中使用多行 flexbox 似乎没有意义，但实际上创建网格布局对我来说确实有意义。

【问题讨论】：

page-break-inside 的一些问题：#1) 尽可能少地使用分页属性，并避免在表格、浮动元素和带边框的块元素中使用分页属性。 #2) 不能在绝对定位的元素上使用该属性 #3) 没有版本的 Internet Explorer（包括 IE8）支持属性值“inherit”，Firefox、Chrome 和 Safari 不支持属性值“avoid”。跨度>

谢谢，但这似乎是对旧信息的剪切和粘贴。在我的情况下不需要支持旧浏览器。

【参考方案1】：

我遇到了同样的问题，解决它的唯一方法是使用没有 flexbox 的 flexbox。 我使用以下规则做到了这一点：

.container 
  display: table;


.item 
  display: inline-block;

您可以在这里找到更多信息：https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

【讨论】：

当我在带有flex-wrap: wrap 的项目上使用它时，这很有效。然而，这些行不再是相同高度的所有项目，它们可以弯曲到内容想要的任何高度。

为row-reverse添加此样式：.container display: table; direction: rtl; .item display: inline-block; direction: ltr;

【参考方案2】：

解决了您的问题。 如果您只关心打印问题，那么这应该会有所帮助：

http://jsfiddle.net/nSE3P/3/

Flexbox 类仍然被应用，但在打印的情况下，它的显示属性被覆盖：

.flexbox 
        display: block;

这使它尊重分页政策。 检查打印预览http://jsfiddle.net/nSE3P/3/show

【讨论】：

感谢您查看此 IKA。不幸的是，我在打印视图中也需要花哨的 flexbox 行为（这会删除它）。我实施的解决方法是在打印视图中重现 javascript 中的 flexbox 行为（在打印视图生成期间，这导致的长时间延迟是可以接受的）。

【参考方案3】：

这个讨论有点晚了，但我想我会分享一下我做了什么来为打印提供类似的 flex-wrap 类型样式。

利用 Dimitris Makris 之前添加的内容，我还继续在每个 .item 中添加以下位以尝试保持高度。

.item:nth-child(5n+1) /* Change this to your liking. (wrap after nth item) */
  clear: left;