打印时Flex布局失效是因浏览器主动降级，需用@media print重写为block/inline-block等传统布局，并移除flex相关装饰与vh单位。
打印时Flex容器完全失效，内容堆成一团怎么办
浏览器打印预览默认会禁用 display: flex（尤其在 Chrome 和 Edge 中），导致原本排版正常的 Flex 布局塌陷为普通块级流。这不是 bug，而是打印媒体对复杂布局的主动降级策略——它只保证语义结构和基础盒模型，不渲染弹性行为。
解决思路不是强行“保留 Flex”，而是用 @media print 主动接管布局逻辑：
- 对所有
display: flex容器，在打印媒体中显式设为display: block或display: table - 用
float、inline-block或纯block+margin重写关键视觉关系（如并排卡片、表头/数据行） - 避免依赖
flex-wrap或align-items，这些在打印中基本无意义
如何让Flex项目在打印时保持横向排列
如果页面有并排的三列卡片（display: flex; flex-wrap: wrap），打印时想维持“一行三列”效果，不能靠 flex-basis 或 flex-grow —— 这些属性在打印媒体中被忽略。
更可靠的做法是切换为浮动或表格布局：
@media print {
.card-container { display: block; }
.card {
display: inline-block;
width: 32%; /* 留 1% 间隙防换行 */
vertical-align: top;
margin-right: 1%;
}
.card:last-child { margin-right: 0; }
}
注意：inline-block 在打印中兼容性远好于 float（后者在某些 PDF 导出工具中易错位），且不需要清除浮动。
打印时隐藏Flex相关的装饰性元素但保留结构
Flex 布局常伴随 ::before/::after 伪元素做分隔线、图标或占位符，这些在打印中往往多余甚至干扰阅读。
不要只靠 visibility: hidden，因为部分打印机驱动仍会为其预留空间。应组合使用：
-
display: none彻底移除渲染树节点 - 对 Flex 的
justify-content/align-items依赖项（如空div占位符），一并在@media print中设display: none - 若需保留语义结构（如辅助技术需要），改用
aria-hidden="true"+display: none
示例：隐藏 Flex 容器内所有分隔线
@media print {
.flex-row > * + *::before {
display: none;
}
.spacer { display: none; }
}
Chrome打印预览中Flex子项高度异常拉伸
这是最隐蔽的问题：Chrome 打印预览有时会将 flex: 1 子项撑满整个页面高度（尤其当父容器设了 min-height: 100vh）。根本原因是打印媒体不计算视口高度，vh 单位退化为不可预测值，而 flex: 1 又试图填满“未知高度”。
必须切断这个链路：
- 在
@media print中重置所有vh/vmax相关尺寸为固定值（如min-height: auto或min-height: 0） - 显式覆盖
flex缩放行为：flex: 0 0 auto或直接flex: none - 避免在打印样式中使用
height: 100%，改用height: auto或具体 px/em 值
关键点：打印样式不是“微调”，而是“重建”——把 Flex 布局当作临时方案，打印时回归传统文档流思维。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
