给flex容器加break-inside: avoid无效，因分页机制只作用于块级盒（bfc），而flex子项非bfc；必须为每个子项（如.card）设display: block并单独加break-inside: avoid，且需避开overflow/transform/absolute等干扰项，推荐@media print中降级为block布局。
为什么给Flex容器加break-inside: avoid没用
因为浏览器打印分页机制只检查块级盒（BFC）是否允许断开，而Flex子项是display: flex-item，不属于块格式化上下文。就算你在.card-list { display: flex; break-inside: avoid; }上写了该声明，Chrome 80+、Firefox 90+ 会直接忽略——它根本不会进入分页计算流程。
必须给每个子元素单独加break-inside: avoid
真正起作用的是卡片、报表行这类子元素本身，前提是它们是独立的块级盒：
-
.card { display: block; break-inside: avoid; }—— 必须显式设为block或inline-block - 如果
.card内部有<p></p>、<ul></ul>、<h3></h3>，它们也得各自加break-inside: avoid，否则断点会退到段落中间 - 别用
page-break-inside: avoid，现代浏览器在Flex上已弃用该语法
哪些样式会让break-inside彻底失效
就算子元素加了break-inside: avoid，只要存在以下任一情况，分页控制就形同虚设：
-
overflow: hidden、transform、position: absolute—— 三者任一都会切断分页上下文 -
height或max-height限制过死：内容动态超出单页（A4纵向约900px减边距）时，浏览器可能宁可留白也不切，但超限太多仍会被截断 - 没包裹在
@media print中：部分浏览器只在print媒体中解析该属性，屏幕渲染阶段还可能因样式冲突导致布局异常
更稳妥的做法：在@media print中降级为block布局
Flex在打印中本质不可控，强行塞指令不如主动接管。核心是把弹性布局转为浏览器能稳定分页的传统流式结构：
@media print { .card-grid { display: block; } }- 子项改用
display: inline-block+vertical-align: top维持横向排列，比float更兼容PDF导出工具 - 避免
gap：它会在页尾放大物理间距，导致下一个子项被挤到下一页；建议在print中设gap: 0; margin-bottom: 12px; - 所有装饰性伪元素（如
::before分隔线）、占位div，统一用display: none移除，而非visibility: hidden
最易被忽略的是：即使你按规范写了break-inside: avoid，只要子项里混用了float或position: absolute，它就一定不生效——浮动脱离文档流，绝对定位脱离布局上下文，分页锚点无处可锚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
