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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>或<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-指令都找不到可依附的流内位置。
