21

我正在尝试以page-break-inside: avoid使用多行 flexbox 布局（带有flex-wrap: wrap）的形式工作。目标只是避免在打印时打断表格问题。

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

但是，当使用多行flexbox时，似乎忽略了page-break-inside: avoidcss规则。查看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: wrapflexbox 布局很好地发挥作用page-break-inside:avoid？

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

4

3 回答 3

22

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

.container {
  display: table;
}

.item {
  display: inline-block;
}

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

于 2017-03-15T10:23:50.337 回答
4

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

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

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

.flexbox {
        display: block;
}

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

于 2014-05-12T12:46:16.127 回答
-1

这次讨论有点晚了，但我想我会分享我所做的，以便拥有类似的 flex-wrap 类型的打印样式。

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

.item:nth-child(5n+1){ /* Change this to your liking. (wrap after nth item) */
  clear: left;
}
于 2018-11-29T00:39:05.917 回答