给 flex 容器加 break-inside: avoid 无效，因其子项非块级盒，不参与分页控制；必须为每个子项（display: block/inline-block）单独设置该属性，并注意 overflow、transform、position 等干扰项。
直接在 Flex 容器上加 break-inside: avoid 没用，它根本不会生效——分页控制只作用于块级盒（BFC），而 Flex 子项不是块级上下文，浏览器压根不检查。
为什么给 .card-list { display: flex; } 加 break-inside: avoid 无效
Flex 容器本身是块级元素，但它的子项（display: flex-item）不属于块格式化上下文（BFC）。break-inside: avoid 的语义是「这个块级盒内部不允许断开」，而 flex-item 不是块级盒，所以该声明被忽略。Chrome 80+、Firefox 90+ 已明确不支持在 flex 容器上解析该属性。
- 常见错误现象：
.card-grid { display: flex; break-inside: avoid; }写了也白写，打印预览里卡片照样被劈开 - 别混淆
page-break-inside: avoid：这是旧语法，现代浏览器在 flex 上已完全弃用 - 即使父容器设了
break-inside: avoid，只要子项没加，断点仍会退到段落或表格行中间
必须给每个子项单独加 break-inside: avoid
真正起作用的是卡片、报表行、列表项这类子元素本身——它们得是独立的块级盒，并显式声明不能被跨页切割。
- 子项需满足基本条件：
display: block或display: inline-block（不能是flex-item） - 示例写法：
.card { display: block; break-inside: avoid; } - 如果子项内还有
<p></p>、<ul></ul>、<h3></h3>，它们也得各自加break-inside: avoid，否则断点会落在段落中间 - 注意兼容性：
break-inside在 Safari 15.4+ 和 Edge 102+ 才稳定支持，老版本可降级为page-break-inside: avoid
干扰 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: block或inline-block（后者更适合并排效果），再加break-inside: avoid - 避免用
gap：它会在页尾放大物理间距，容易把下一个子项挤到下一页；建议在 print 中设gap: 0; margin-bottom: 12px; - 删掉所有
float和position: absolute：它们会让整个分页逻辑连锁失效，哪怕只有一处残留
最常被忽略的一点：break-inside: avoid 是个「请求」而非「指令」，浏览器有权拒绝——尤其当内容高度接近页面极限、或父容器存在未察觉的 transform / overflow 时，它会静默失效，连 warning 都不报。验证是否生效，唯一可靠方式是实际导出 PDF 后逐页检查，而不是只看打印预览快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
