flex布局打印时失效是规范行为而非bug，浏览器主动降级为块级流，需在@media print中重写样式并单独设置子项的分页控制。
Flex布局在打印时排版错乱，不是你写错了，而是浏览器压根不按 Flex 规则渲染打印内容——它主动降级为最基础的块级流，display: flex、flex-wrap、justify-content 全部失效。
Chrome/Edge 打印预览直接忽略 display: flex
这不是 bug，是规范行为：打印引擎（尤其是 Chromium 系统）默认禁用弹性布局，避免复杂计算影响 PDF 生成稳定性。即使你在 @media screen 里写了完整的 Flex 样式，在 @media print 中也必须重写，且不能只写 display: flex 就以为能继承其他行为。
-
display: flex容器在打印中常退化为display: block，子项垂直堆叠 -
flex-direction: column可能被忽略，仍按文档流从左到右排 -
flex-grow在无视口约束的打印环境里会无限拉伸，导致内容溢出或空白页
break-inside: avoid 加在 Flex 容器上完全无效
分页控制只对块级格式化上下文（BFC）生效，而 Flex 子项不是 BFC。给 .card-list { display: flex; break-inside: avoid; } 写这条规则，等于没写。
- 真正起作用的是每个子元素本身：
.card { display: block; break-inside: avoid; } - 如果子项内部还有
<p></p>或<ul></ul>，它们也得单独加break-inside: avoid - 只要子项存在
overflow: hidden、transform或position: absolute，break-inside就立刻失效
Flex 相关装饰和单位在打印中不可靠
很多看似无害的细节，在打印上下文中会引发连锁塌陷：伪元素、gap、vh、fr、align-items 全部属于高风险项。
-
::before/::after做的分隔线、图标、占位符，一律用display: none彻底隐藏 -
gap在页尾会被放大物理间距，推荐在打印中设为gap: 0; margin-bottom: 12px; -
vh和fr单位在打印中计算失准，可能算成0px或撑满整页；改用px或带明确父高的% -
align-items: center易导致内容被截断，align-items: flex-start更安全
Safari 对 Flex + 分页的兼容性更差
Safari（尤其 17.x 及更早）要求分页指令的目标元素必须是标准文档流中的块级框，一旦父容器是 display: flex 或 display: grid，break-before: page 就直接被无视。
- 别在 Flex 容器内子元素上写
break-before，哪怕加!important也没用 - 把
break-before: page移到其父级，并确保该父级是display: block或display: flow-root - 表格跨页断裂时，
break-inside: avoid对<tr> 基本无效，必须用 <code>page-break-inside: avoid+thead { display: table-header-group; }最常被忽略的一点：只要页面里还残留一处未重置的
float或position: fixed，整个打印分页逻辑就可能集体失能——不是某一条规则失效，而是锚点丢失，后续所有break-指令都找不到可依附的流内位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
