web-dev-qa-db-ja.com

改ページ-フレックスボックスで機能しなかった後

これは、Firefoxの印刷プレビュー内で期待される結果を生成しません。

<aside>
  side
</aside>

<div>
  <p> page 1 </p>
  <p> page 2 </p>
</div>

CSS：

body{
  display: flex;
}

aside{
  flex: none;
  width: 100px;
}

div{
  flex: auto;
}

p{
  break-after: always;
  page-break-after: always;
}

In Chrome and IE 2ページを取得します。祖先がフレックスボックスの場合、FFは2ページのdivを分割しないようです。 。 なぜ？

cssfirefoxprintingflexboxpage-break
15
nice ass

私はそれがFirefoxでは機能しないと確信しています。

改ページを壊すことができるものは（内部で改ページを使用して）

  • テーブル
  • フローティング要素
  • インラインブロック要素
  • 境界線のあるブロック要素

休憩をとる必要があるかどうかを定義するために、次のルールが適用されます。

1.関連する3つの値のいずれかが強制ブレーク値、つまり常に左、右、ページ、列、または領域である場合、それが優先されます。関係する値のいくつかがそのようなブレークである場合、フローで最新に表示される要素の1つが取得されます（つまり、ブレークビフォア値がブレークアフター値よりも優先され、それ自体がブレークよりも優先されます。内部値）。

2.関連する3つの値のいずれかが回避ブレーク値、つまり、回避、回避ページ、回避領域、回避列の場合、その時点ではそのようなブレークは適用されません。

強制ブレークが適用されると、必要に応じてソフトブレークを追加できますが、対応する回避値で解決される要素境界には追加できません。

ブレークアフター--CSS | MDN

簡単に言うと、あなたの場合、flex内で使用しているために機能しません。

17
Alex Char

Firefoxはfloat要素を使用しても改ページを正しく実行しないため、flexが機能しないことは驚きではありません。出典： CSS改ページ-すべてのブラウザで改ページが機能しない

一般に、Firefoxの改ページのサポートはあまり良くありません。参照： https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

一貫性のあるクロスブラウザ印刷結果が必要な場合、答えはほとんどの場合、wkhtmltopdfやprincexmlなどのツールを使用してサーバー側PDF生成を使用することです。

3
William Hertling
display: flex;

は、デフォルトではクロスブラウザ互換ではないプロパティです。

例をいじったり、達成しようとしていることについてもう少し詳しく説明したりすると便利ですが、これでうまくいくと思います。

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
0
Justin Medas