flex布局中让子元素像table-cell垂直居中，需设父容器display: flex并明确高度，再用align-items: center；子元素不设height，避免外边距塌陷，且保持flex-direction: row语义。
flex布局中如何让子元素像table-cell一样垂直居中
Flex容器默认的 align-items: stretch 会让子项拉满高度，但实际开发中常需要“内容高度自适应 + 垂直居中”，类似 display: table-cell 的 vertical-align: middle 行为。关键不是强行模仿，而是用对 flex 的基础属性组合。
- 父容器必须设
display: flex且明确高度（或能撑开高度），否则align-items无参照基准 - 子元素不需要设
height: 100%，反而可能破坏弹性；只需确保内容不溢出、不触发最小高度限制 - 若子元素内含块级元素（如
div、p），需确认其margin没有意外撑开父容器（尤其顶部/底部外边距塌陷） - 慎用
align-items: center配合flex-direction: column—— 这会改变主轴，不再是“类 table-cell”的横向排列语义
用flex模拟多列等宽表格（类似table-layout: fixed）
当需要多列严格等宽、不随内容伸缩（比如表头与数据行对齐），不能只靠 flex: 1，它按剩余空间分配，内容长的列会变宽。真正接近 table-layout: fixed 的做法是结合 flex-basis 和 min-width 控制。
- 给每个子项设
flex: 0 0 calc(100% / N)（N 为列数），例如三列就写flex: 0 0 33.333% - 额外加
min-width: 0防止内容过长时 flex 项强行撑宽（这是 flex 默认行为，和 table-cell 的“收缩不溢出”相反） - 避免在子项上设
width，它会和flex-basis冲突；若需最小宽度保障，用min-width替代 - 注意：百分比计算在小数精度下可能有 1px 偏差，可配合
box-sizing: border-box和去除间隙来缓解
flex中实现table-cell的border-collapse效果
Flex 本身没有 border-collapse，相邻子项的边框默认会双倍显示。要模拟“共享边框”，核心思路是只让部分元素画边框，再用负 margin 或伪元素补位。
- 最简方案：所有子项设
border-right: 1px solid #ccc，最后一个子项用:last-child { border-right: none; } - 上下边框同理，用
:first-child和:last-child控制首尾 - 若需完整四边“内嵌”感（如表格线交叉处无缝），需配合
margin微调，例如margin-right: -1px拉近相邻项（但会增加布局脆弱性） - 更健壮的做法是用伪元素
::after在容器上绘制网格线，完全脱离子项边框控制
为什么不用flex: 1直接替代table-cell
flex: 1 看似简单，但在真实表格场景下容易出问题：它等价于 flex: 1 1 0%，意味着基值为 0，所有空间全靠分配，导致内容极少的单元格也强行占位，破坏视觉节奏。而 table-cell 是基于内容宽度自动伸缩的。
- 内容为空或极短时，
flex: 1仍会均分空间；应改用flex: 0 1 auto（即不放大、可缩小、基值为内容宽） - 若某列需固定宽度（如序号列），直接设
flex: 0 0 60px，其他列用flex: 1即可，无需 JS 计算 - IE11 对
flex: 1解析有 bug，建议显式写出三个参数，如flex: 1 1 0或flex: 0 1 auto
真正难的不是写对 flex 属性，而是判断什么时候该放弃“模拟 table-cell”，转而用语义正确的 display: grid 或原生 table —— 尤其当需要跨行、跨列或复杂对齐时，flex 的局限性会立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
