根本原因是浏览器打印时主动降级flex布局，分页机制仅识别块级盒（bfc），而flex容器及子项均非bfc；break-inside: avoid必须作用于display: block或flow-root的子元素，且需避开float、transform、absolute等干扰项，并在@media print中降级为传统流式布局。
Flex布局在打印中出现断页异常，根本原因不是样式写错了，而是浏览器压根不按你在屏幕上写的那套逻辑来处理分页——它主动降级、忽略弹性属性、绕过你加的break-inside: avoid，甚至把flex-direction: column当空气。
为什么break-inside: avoid加在Flex容器上完全没用
因为分页机制只检查块级盒（BFC），而display: flex容器本身不是BFC；它的子项是flex-item，也不是块级盒。Chrome 80+、Firefox 115前、Safari 16.4前都会直接跳过这个声明。你写.card-list { display: flex; break-inside: avoid; }，等于白写。
- 真正起作用的是子元素本身，且必须是
display: block或display: flow-root -
.card { display: block; break-inside: avoid; }才可能生效 - 如果
.card里有<p></p>或<ul></ul>，它们也得各自加break-inside: avoid，否则断点会退到段落中间 - 别用
page-break-inside: avoid——它在现代浏览器对Flex已弃用，仅作fallback
Flex子项为什么总被硬生生劈开
Flex子项默认脱离标准文档流，浏览器无法锚定它的分页位置。哪怕你给子项加了break-inside: avoid，只要它父容器是flex或grid，或者自身带position: absolute、transform、overflow: hidden，这条规则就立即失效。
- 浮动（
float）、绝对定位（position: absolute）、变换（transform）三者任一存在，分页上下文即被切断 -
height或max-height设得太死，内容超A4纵向可用高度（约900px减边距）时，浏览器宁可留白也不切，但超太多仍会被截断 - 没包裹在
@media print里：部分浏览器只在print媒体中解析该属性，屏幕渲染阶段还可能因样式冲突导致布局异常
为什么Chrome看着正常，Safari一打就错乱
Safari对分页指令更严格：它要求触发break-before: page的元素必须是标准流中的块级框，且父容器不能是flex或grid。一旦你用了div.flex包着h2，Safari就当没看见这条规则。
- 解决办法是把
break-before: page移到父容器上，并确保它是display: block或display: flow-root - 表格行（
<tr>）在Safari中基本无视<code>break-inside: avoid，必须用thead { display: table-header-group; }+table { page-break-inside: avoid; } -
@media print块要放在CSS文件末尾，否则容易被框架注入的全局样式覆盖 - 所有
display: flex容器统一设为display: block或display: table - 并排卡片改用
display: inline-block+vertical-align: top，比float更兼容PDF导出工具 - 禁用
gap，改用margin-bottom控制间距，避免页尾意外放大空隙 - 所有伪元素（
::before/::after）、装饰性div，统一用display: none移除
最稳妥的解法：放弃“保留Flex”，改用打印安全布局
强行塞flex-flow、align-items、gap这些，在打印中几乎全不可靠。真正可控的做法是在@media print中主动降级为传统流式结构。
最容易被忽略的一点：就算你每个卡片都写了break-inside: avoid，只要其中混用了float或position: absolute，它就一定不生效——浮动脱离文档流，绝对定位脱离布局上下文，分页锚点无处可锚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
