display: table-cell能自动适应，因其继承表格单元格逻辑：宽度由内容撑开（min-content），高度由同行最高子项决定且同级等高；但需嵌套table/table-row，缺乏响应式控制，现代项目更推荐grid或flex。
直接用 display: table-cell 最接近原生表格行为，但现代项目更推荐用 display: grid 或 display: flex 模拟，可控性高、无隐式表格语义干扰。
为什么 display: table-cell 能“自动适应”
它继承了 HTML 表格单元格的尺寸计算逻辑：宽度由内容撑开（min-content），高度由行内最高子项决定，且同级 table-cell 会自动等高。但前提是父容器必须是 display: table-row，再外层还得是 display: table —— 这套嵌套容易失控，且无法响应式断点干预。
- 不能直接对
table-cell设flex或grid，它不支持这些布局上下文 - 若父
table-row宽度不足，内容会溢出或换行，但不会压缩字体大小 - IE8+ 支持良好，但
vertical-align在不同浏览器中对齐基准可能不一致
grid 中用 minmax(min-content, 1fr) 模拟单元格自适应
这是目前最灵活的替代方案：既保留“内容决定最小宽度”的特性，又允许在空间富余时拉伸填充。关键不是只写 min-content，而是用 minmax() 给它一个弹性上限。
-
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr) 100px;—— 前两列随内容变宽，但不超过分配比例；第三列固定 - 若某列内容为空，
min-content算出 0，需加min-width: 0防止塌缩（尤其在overflow: hidden容器里） - 避免在
grid-auto-columns里用min-content，它只对显式定义的轨道生效
flex 下实现“单元格等宽+内容自适应”的折中写法
flex 本身不提供“列对齐”能力，但可通过 flex-basis + min-width 组合逼近效果：
- 给每个子项设
flex: 0 1 auto;→ 不放大、可缩小、初始宽按内容 - 再加
min-width: max-content;防止文本被强制换行压窄（注意：不是所有浏览器都支持max-content，需降级为min-width: 120px;） - 若需严格等高，父容器必须设
align-items: stretch（默认值），且子项不能设height或align-self覆盖 - 慎用
white-space: nowrap—— 它会让min-content计算整行长度，极易撑破容器
别忘了 box-sizing: border-box 和 word-break
即使 min-content 算出了理想宽度，如果元素还走默认的 content-box 模型，padding 和 border 仍会把它撑出去。中文内容因可任意断行，min-content 常退化为单字宽；英文单词则按整词计算 —— 混合内容时宽度波动剧烈，此时必须加 word-break: break-word 或 overflow-wrap: anywhere 并测试真实数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
