如何使`page-break-inside:避免`与`flex-wrap:wrap`一起很好地工作 [英] How to get `page-break-inside: avoid` to work nicely with `flex-wrap: wrap`

问题描述

我正在尝试使 page-break-inside:避免在使用多行flexbox布局的表单中工作(使用 flex-wrap:wrap ).目的只是为了避免在打印时破坏表格问题.

I am trying to get page-break-inside: avoid to work in a form that uses a multi-line flexbox layout (with flex-wrap: wrap). The goal is simply to avoid breaking form questions when printing.

这在单行flexbox或没有flexbox的情况下都能很好地工作.请参阅 http://jsfiddle.net/MartijnR/nSE3P/1/show/(请注意，未应用flexbox类)

This works well with a single line flexbox or without a flexbox. See the print preview of http://jsfiddle.net/MartijnR/nSE3P/1/show/ (note the flexbox class is not applied)

但是，当使用多行flexbox时，似乎忽略了 page-break-inside:避免 css规则.请参阅 http://jsfiddle.net/MartijnR/nSE3P/2/show/(请注意，我将flexbox类添加到了section元素中)

However, when using a multi-line flexbox, it seems to ignore the page-break-inside: avoid css rule. See the print preview of http://jsfiddle.net/MartijnR/nSE3P/2/show/ (note I added the flexbox class to the section element)

<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，因此要到明年年初才能在其中使用)

I've tried in both the latest Chrome and IE11 and both demonstrate the same behaviour which makes me think it's not a browser bug. (FF doesn't support multi-line flexboxes yet, so it won't work there until early next year)

有人知道如何获取 flex-wrap:wrap flexbox布局以与 page-break-inside:avoid 很好地玩吗?

Does anybody know how to get flex-wrap: wrap flexbox layouts to play nicely with page-break-inside:avoid?

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

PS. I'm aware that in the sample code it doesn't seem to make sense to use a multi-line flexbox, but in reality it does make sense for me to create a grid layout.

推荐答案

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

I had the same problem and the only way to overcome it was to use flexbox without flexbox. I did that using the following rules:

.container {
  display: table;
}

.item {
  display: inline-block;
}

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

You can find more information here: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

这篇关于如何使`page-break-inside:避免`与`flex-wrap:wrap`一起很好地工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！