display: contents：让包裹层「消失」，子元素直接成为 flex item
flex / grid 只把直接子元素当作 item。可实际工程里，容器与真正的内容之间常隔着一层语义包裹（组件根节点、列表项 wrapper、context provider 注入的 div）——这层会成为唯一的 flex item，把真正想参与布局的元素「闷」在里面。display: contents
让这层自身不生成盒子、把它的子元素上移一层，于是子元素直接成为父 flex 容器的 item，享受 gap / 对齐 / flex 伸缩。下面实测这层「穿透」。
1 · 切换包裹层 block ↔ contents
flex 容器里有 A、一个包裹层（含 B1 B2 B3，各设 flex: 1）、C。包裹层为 block 时它是唯一的中间 flex item（红框即它的盒子）,B 被关在里面、flex: 1 无效；切到
contents 后红框消失,B1 B2 B3 直接进入 flex 行、与 A / C 同享 gap 并按 flex: 1 伸展。
它改的是 box tree，不是 DOM。 display: contents 的元素在 DOM 里依旧存在（querySelector 仍能拿到、事件仍冒泡），只是不再生成自己的盒子；渲染时如同被它的子元素「就地替换」。所以它常被形容为「穿透」或「盒子透明」。
2 · 代价：包裹层自己的盒式样式全部失效
既然不生成盒子，这层上一切与盒子相关的样式都不再渲染：
| 这层上的样式 | contents 后 |
|---|---|
background / border / box-shadow |
不渲染（无盒子可画） |
padding / margin / width / height |
失效（不占空间、不约束尺寸） |
color / font-* 等可继承属性 |
仍继承给子元素（继承沿 DOM，不受影响） |
作用于子元素的 flex / align-self |
生效（子元素已是真正的 flex item） |
3 · 几处务必注意
可访问性历史问题。 早期实现会把 display: contents 的元素从 accessibility tree 移除，导致其语义(role)丢失——对 <ul> / <table> 这类靠自身角色表意的元素尤其有害（列表 /
表格语义被抹掉）。现代浏览器对通用元素(div / span)已修复，但对 table 内部元素、部分表单控件仍可能行为异常或无效，使用前需在目标浏览器实测无障碍影响。
对 replaced element 与 table 内部盒子无效。 img / video / input / button 等 replaced / 表单控件，以及 table 的内部盒子（tr / td 等），指定
display: contents 不会「穿透」——按规范回退为正常或等价 display。它只对「普通容器元素」有意义。
与 display: none 的区别。 none 连同整棵子树一起从渲染中移除；contents 只移除这一层自己的盒子、保留子树并让它们上移。一个是「连孩子一起隐藏」，一个是「只把自己变透明」。
不只 flex。 display: contents 对 grid 同样适用——让包裹层的子元素成为 grid 容器的 grid item，参与 grid-template 的轨道分配。凡是「只认直接子元素」的布局(flex / grid)，它都能用来抹平中间的语义包裹层。