如何用CSS@media print实现嵌套div打印场景下8行6列精准排布？

核心结论 #

仅使用现有嵌套div的HTML结构完全可以实现打印场景下的固定行列精准对齐，必须通过@media print媒体查询块配置打印专属规则，不能改动原有浏览器端的flex布局样式，避免影响日常屏幕展示效果。

具体实现代码 #

打印场景下将容器的弹性布局替换为严格约束行列的网格布局，从底层锁定每个元素的位置，不会出现屏幕端flex自动换行带来的位置偏移，完整配置示例如下：

@media print {
  /* 基础页面配置，固定打印纸张尺寸与页边距 */
  @page {
    size: A4;
    margin: 10mm;
  }

  /* 覆盖原有.labels容器的屏幕端样式 */
  div.labels {
    display: grid;
    /* 严格定义6列、8行的固定网格结构 */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 1fr);
    /* 固定格子间距，消除弹性间距 */
    gap: 2mm;
    /* 撑满纸张可用区域，无多余边距 */
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* 统一子label元素的属性，消除尺寸偏差 */
  div.labels > div.label {
    margin: 0;
    padding: 2mm;
    /* 固定盒模型，避免内边距、边框撑破网格尺寸 */
    box-sizing: border-box;
    /* 关闭可能继承的弹性布局属性 */
    flex: none;
    overflow: hidden;
  }

  /* 强制浏览器输出元素自带的背景色、边框等样式 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

校准注意事项 #

• 所有布局尺寸优先使用物理打印单位（mm/cm），不要依赖无约束的弹性单位，避免不同打印设备下的尺寸偏移。
• 固定8行6列总容量为48个格子，若实际.label元素数量超过48，可添加规则div.labels > div.label:nth-child(n+49) { display: none; }隐藏超出内容，防止多余元素流转到第二页破坏单页布局。
• 如果偏好继续使用flex实现固定网格，需给每个.label设置固定宽度（width: calc((100% - 10mm)/6)）和固定高度（height: calc((100% - 14mm)/8)），但这种方式容易因为子元素内容过长撑破格子，对齐稳定性弱于grid实现。

内容的提问来源于stack exchange，提问作者trogne