打印时flex gap完全失效，因浏览器打印引擎将display:flex重置为block并忽略gap等属性；需在@media print中改用block/table布局+显式margin/padding重建间距。
现代浏览器在打印预览中会主动禁用 display: flex，所以无论你用原生 gap 还是 PostCSS polyfill 生成的 margin 模拟方案，**打印时都会失效**——这不是兼容性问题，而是浏览器策略层面的降级。
为什么打印媒体中 flex gap 完全不生效
Chrome、Edge 和 Safari 的打印引擎默认剥离弹性布局行为，display: flex 被重置为 display: block，所有依赖 flex 的属性（gap、justify-content、flex-wrap）均被忽略。即使你在 @media print 中显式写了 gap: 16px，计算值也会是 0px 或 not supported。
- 不是 bug，是规范允许的行为：CSS Paged Media Module 明确要求“避免复杂布局渲染以保证可预测的分页”
-
@supports (gap: 0)在打印媒体中无意义——支持检测本身就在屏幕样式中运行 - Flex Gap Polyfill 生成的 CSS 变量和负 margin 也随
display: flex一起被丢弃，不会 fallback 到打印流中
@media print 中必须重写 flex 容器的 display 值
不能指望保留 flex 行为，唯一可靠路径是用传统布局接管。关键不是“模拟 gap”，而是“重建视觉间距逻辑”：
- 对所有 flex 容器，在
@media print中强制设为display: block或display: table - 子项改用
display: inline-block+width+vertical-align: top控制横向排列（比float更稳定，PDF 导出工具兼容更好） - 用
margin或padding显式声明间距，例如：.item { margin-right: 8px; margin-bottom: 8px; } - 若需保持“每行 N 个”的密度，
width建议用百分比并预留 1% 缓冲防换行，如width: calc(33.333% - 1%);
如何安全移除 flex 相关装饰但保留语义结构
Flex 布局常伴生伪元素（::before/::after）、空占位符或 margin: auto 对齐，这些在打印中极易导致空白页或错位：
立即学习“前端免费学习笔记（深入）”；
- 所有
::before/::after必须在@media print中设display: none，仅靠visibility: hidden不够——部分打印机驱动仍为其分配空间 - 用
display: none隐藏 flex 子项时，注意它可能破坏原有块级流顺序；若需维持阅读顺序，改用aria-hidden="true"+position: absolute; left: -9999px; - 避免在打印样式中使用
vh、vmin或动态单位（如clamp()），它们在分页上下文中解析不可靠，优先用px或rem - 表格类 flex 布局（如模拟表头/数据行）应直接切到
display: table+table-cell，而非强行用 inline-block 模拟
真正容易被忽略的是：打印样式必须覆盖所有嵌套层级的 flex 容器，哪怕只有一层漏掉，整个区块就会塌陷成单列堆叠。别依赖框架的 print 工具类（如 Bootstrap 的 d-print-* ），它们不处理 display 重写，也不干预 gap 逻辑。
