打印预览中display: flex失效是因浏览器默认不将screen样式应用于print媒体类型，须在@media print中显式重写flex-flow、max-width、page-break-inside等关键样式，并避免依赖justify-content、align-items、flex-grow等不可靠属性。
打印预览下display: flex完全失效？先检查媒体类型
很多开发者发现打印时flex布局“塌了”——元素堆成一列、顺序错乱、宽度全崩，不是代码写错了，而是浏览器默认只对screen应用部分样式。打印预览（print）是独立媒体类型，flex相关声明不会自动继承。
必须显式在@media print中重写关键样式，不能依赖全局规则。尤其注意：chrome 和 edge 的打印预览会主动降级部分弹性属性（比如忽略flex-wrap: wrap），firefox 略宽松但也不保证一致。
-
@media screen里的display: flex、flex-direction、justify-content等，在@media print里默认不生效 - 不要在
@media print里只写display: flex就以为万事大吉——得补全整个逻辑链 - 某些旧版 safari 打印时甚至会把
flex容器当block处理，连flex-direction: column都无效
flex-direction: column在打印时变回row？用flex-flow兜底更稳
单独设置flex-direction在打印中容易被忽略，尤其当父容器有其他弹性属性干扰时。更可靠的做法是用flex-flow一次性声明主轴和换行行为，减少解析歧义。
例如，想让卡片列表在打印时竖排堆叠，仅写flex-direction: column可能不起作用；而flex-flow: column nowrap能提高命中率，因为它是flex-direction和flex-wrap的简写，浏览器解析优先级更高。
立即学习“前端免费学习笔记（深入）”；
- 避免只改
flex-direction，补上flex-wrap: nowrap或wrap（根据是否需要分页断行） - 如果内容可能跨页，
flex-wrap: wrap+break-inside: avoid比强行nowrap更实用 - 慎用
align-items: center——打印时水平居中常导致内容被截断，改用flex-start更安全
打印时flex-grow撑满页面却溢出？用max-width和page-break-inside控高
flex-grow在屏幕上有视口约束，但打印没有“滚动”，它会无节制拉伸，尤其遇到height: 100%或min-height组合时，极易导致内容被切掉或空白页增多。
真正可控的方式是放弃靠flex-grow占位，转为用max-width限制宽度、page-break-inside: avoid防止卡片被拆到两页、再配合height: auto释放高度限制。
-
flex-grow: 1在打印中几乎没意义，删掉它，用width或max-width明确尺寸 - 对卡片类容器加
page-break-inside: avoid，否则 Flex 子项可能在页中硬生生劈开 - 若需等高布局，别用
align-items: stretch——打印时它会让所有项拉到最长项高度，直接撑爆页面
Chrome 打印预览里justify-content: space-between失效？换margin模拟更靠谱
Chrome 的打印引擎对justify-content支持极不稳定，尤其是space-between和space-around，经常退化成flex-start。这不是 bug，是渲染路径差异导致的兼容性事实。
与其赌浏览器实现，不如用margin手动模拟分布效果：给首项margin-left: 0，末项margin-right: 0，中间项用margin-left: auto或固定值。虽然不够优雅，但 100% 可控。
- 避免在
@media print中依赖justify-content做关键对齐，特别是标题+按钮这种结构 - 用
text-align: right+margin-left: auto组合，比justify-content: flex-end稳定得多 - 如果必须保留弹性语义，至少加
!important——Chrome 打印样式表权重有时会覆盖你的@media print
打印样式不是屏幕样式的子集，而是另一套约束条件下的重新设计。最危险的假设，就是以为“flex 写对了，打印自然就好”。