flex容器上设break-inside: avoid无效，因分页控制需作用于块级子项；必须为每个卡片等子项单独添加该属性，并确保无overflow:hidden、transform、绝对定位等干扰，推荐@media print中降级为block布局。
flex容器里加break-inside: avoid完全没用
直接给 .card-list { display: flex; break-inside: avoid; } 写上，打印预览里照样被劈开——因为 break-inside 只检查「块级元素自身是否允许断开」，而 flex 容器虽然块级，它内部的子项是 display: flex-item，不属于块格式化上下文（BFC），浏览器压根不看它的分页声明。
- 必须把每个要整页显示的子项（比如每张卡片、每条报表行）单独加上
break-inside: avoid - 如果子项里还有
、 - 别在 flex 容器上写
page-break-inside: avoid，现代浏览器（Chrome 80+、Firefox 90+）已忽略该属性在 flex 上的行为
为什么flex子项加了break-inside还是被截断
常见现象是卡片内容刚过页尾，下半截就被推到下一页，但卡片本身没碎——其实是子项虽加了 break-inside: avoid，却被父容器的其他样式干扰了。这些干扰项会直接让分页逻辑失效：
-
overflow: hidden、transform、position: absolute：三者任一存在，都会切断分页上下文，break-inside形同虚设 -
height或max-height限制：浏览器宁可留白也不切断，但若内容高度动态超出单页（A4 纵向约 900px 减边距），它仍会被截断 - 未包裹在
@media print中：屏幕渲染也会受干扰，且部分浏览器只在 print 媒体中解析该属性
更稳妥的替代方案：降级为块流布局
Flex 在打印时本质是“不可控布局”，强行塞分页指令不如主动降级。核心思路是：在 @media print 中把 flex 容器转成块级流，再施加分页控制。
- 重置容器：
@media print { .card-grid { display: block; } } - 子项改用
display: block并加break-inside: avoid，确保它们是独立块级盒 - 若需保留左右并排效果，改用
display: inline-block+vertical-align: top，比 flex 更可控 - 避免用
gap：它会在页尾放大物理间距，导致下一个子项被挤到下一页；建议在 print 中设gap: 0; margin-bottom: 12px;
遇到浮动或绝对定位时怎么办
如果 flex 子项里混用了 float 或 position: absolute，break-inside: avoid 必然失效——浮动脱离文档流，绝对定位脱离布局上下文，分页锚点无处可锚。
- 删掉所有
float和配套的clear，改用display: flow-root创建 BFC，既包裹内容又保留在流内 - 绝对定位元素尽量移出 flex 结构，或用 JS 提前计算位置后转为静态布局
- 实在无法重构？插入一个流内锚点：
，放在需要分页的位置之后
真正卡住分页的，从来不是属性写错，而是元素不在文档流里。Flex 打印分页问题，本质是布局模型和分页引擎的 mismatch——你得先让它回到流里，再谈怎么断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
