结论：用flex模拟表格行为可行但不能替代语义化表格；它适合UI布局（如响应式卡片、表单行、按钮组），不适合真实数据表格。
直接说结论：用 flex 模拟表格行为（比如把 div 套 display: flex 伪装成 tr/td）在绝大多数 UI 场景下是可行的，但**不能替代语义化表格**；它适合布局，不适合数据表格——混淆这两类需求，就是踩坑的开始。
什么时候该用 flex 模拟表格结构
典型场景是「视觉上像表格，但内容不具行列关系」：比如响应式卡片网格、表单行、工具栏按钮组、多列统计指标块。这些本就不是数据表格，只是需要对齐和等宽/等高效果。
- 需要在小屏自动换行？
flex-wrap: wrap比table-layout: fixed+ 媒体查询更干净 - 要让某列固定宽度、其余自适应？
flex: 0 0 200px和flex: 1组合比width+min-width更可靠 - 需垂直居中且跨浏览器一致？
align-items: center直接生效，不用 hackvertical-align或伪元素 - 父容器高度不确定，但子项必须等高？
align-items: stretch（默认）天然支持，table 需靠table-cell+height: 100%多层嵌套
为什么 display: table 在非数据场景里很危险
display: table 系列值（table-row、table-cell）会强制触发表格渲染逻辑，这不是样式调整，而是改变盒模型本质。
-
margin在table-cell上完全无效，想留空隙只能靠padding或额外 wrapper -
vertical-align行为受限：只在table-cell内起作用，且无法与flex混用 - 无法用
flex-direction: column反转主轴方向，table-row固定横向，table-column不被广泛支持 - 屏幕阅读器可能误读为真实表格，破坏可访问性——尤其当内部没有
th、scope等语义标记时
flex 模拟表格时容易忽略的兼容性细节
不是所有 flex 属性都能无脑写，IE 11 是现实分水岭。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1在 IE 11 中等价于flex: 1 1 0%，但若子项有固有宽度（如图片），可能撑破容器；稳妥写法是flex: 1 1 auto -
align-content在单行 flex 容器中无效，只对flex-wrap: wrap多行起作用——很多人写了却没效果，其实是忘了加wrap -
justify-content: space-between在只有两个子项时表现正常，但三个以上时首尾间距会变大；若需均匀间隙，改用space-around或space-evenly（后者 IE 不支持） - Flex 容器内
float、clear、vertical-align全部失效——如果旧代码混用了这些，得一并清理
真正难处理的不是语法，而是判断：这个“表格”到底是 UI 布局还是数据容器。前者用 flex，后者必须用 table 元素+语义化标签。越早区分清楚，后期改起来越省力。
