Flex布局中table-cell的替代方案是用display: flex配合flex: 1和min-width: 0实现等宽自适应列，统一th/td弹性行为并处理IE11兼容性及响应式堆叠。
Flex布局里table-cell的替代方案
Flex本身没有display: table-cell语义，但能用display: flex + flex: 1或flex-basis逼近等宽/自适应列效果。关键不是“模拟表格”，而是解决“多列对齐+内容撑开+响应式”这三件事。
常见错误是直接套用flex-direction: row然后给子项设width: 33.33%——这样既不响应式，又在内容超长时溢出、换行错乱。
- 用
flex: 1代替固定width，让列自动均分剩余空间 - 给子项加
min-width: 0，防止长文本（如URL）强行撑宽导致布局断裂 - 外层容器必须设
display: flex且flex-wrap: nowrap（默认值，但显式写上更稳妥）
处理表头与表体对齐的坑
纯Flex做“表头+数据行”时，列宽不同步是最典型问题：表头文字短，数据行有长字符串，结果列错位。这不是Flex的bug，是没控制好flex-basis和min-width。
正确做法是统一所有列（包括th和td）的弹性行为：
立即学习“前端免费学习笔记（深入）”；
- 所有列项设
flex: 0 1 auto（不放大、可缩小、基准为内容宽度） - 再配合
min-width: 0和overflow: hidden或text-overflow: ellipsis截断 - 如果需要某列固定宽度（如序号列），单独设
flex: 0 0 60px
别依赖white-space: nowrap来保列宽——它会让内容横向滚动，破坏可读性。
IE11下flex-table兼容性雷区
IE11支持Flex但有严重bug：flex: 1在嵌套Flex容器中常失效，min-width: 0也不起作用。这时候不能硬扛，得降级。
可行策略只有两个：
- 对IE11单独用
display: table回退（用@supports not (display: flex)或UA检测） - 放弃“完全等宽”，改用
flex: 0 0 25%（四列表）+box-sizing: border-box，并接受内容溢出时截断
千万别在IE11里混用flex和float，会触发渲染异常，出现列重叠或消失。
响应式断点下的列堆叠逻辑
真表格用@media切display: block就完事，Flex要手动控制堆叠顺序和间距。
核心是改flex-direction和重置flex值：
- 小屏下设外层
flex-direction: column，每列变flex: 1 1 auto（垂直占满） - 用
order属性调整视觉顺序（比如把操作列提到顶部） - 记得清除
min-width: 0，否则堆叠后高度塌陷
最易忽略的是：堆叠后gap在旧版Safari里不生效，得用margin-bottom补。
