如何让`page-break-inside：避免`与`flex-wrap：wrap`很好地协同工作

Posted 2021-04-02

我试图让page-break-inside: avoid以使用多线flexbox布局（使用flex-wrap: wrap）的形式工作。目标只是避免在打印时打破形式问题。

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

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

<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不支持多线柔性版，因此直到明年年初它才能在那里工作）

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

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

答案

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

.container {
  display: table;
}

.item {
  display: inline-block;
}

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

另一答案

对你的问题玩了一下。如果您主要关注打印问题，那么这应该有所帮助：

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

Flexbox类仍然应用但在打印时，其显示属性被覆盖：

.flexbox {
        display: block;
}

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

另一答案

这个讨论有点晚了，但我想我会分享我所做的有类似的flex-wrap类型的打印方式。

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

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