flex-grow不能替代table-cell等宽行为，因其分配的是剩余空间而非容器总宽；需设flex: 1 0 0（flex-basis: 0）才能实现真正等宽，配合box-sizing: border-box和flex-wrap: nowrap确保稳定对齐。
flex-grow 为什么不能直接替代 table-cell 的等宽行为
因为 flex-grow 分配的是「剩余空间」，不是「容器总宽」。当子元素本身有内容宽度（比如文字、图片）时，flex-grow: 1 只会让它们“瓜分掉父容器没被占满的那部分”，而不是强制拉平到等宽。这和 table-cell 默认均分父容器宽度的行为本质不同。
常见错误现象：display: flex 下多个 div 写了 flex: 1，但实际宽度不一致——尤其当某项内容很长、另一项很短时，长内容项会撑开，短内容项只略宽一点，远非视觉等分。
- 想模拟
table-cell的等宽效果，更可靠的方式是：给所有子项统一设flex: 1 0 0（即flex-grow: 1、flex-shrink: 0、flex-basis: 0） -
flex-basis: 0是关键：它让所有子项初始“宽度为 0”，此时flex-grow才真正按比例均分整个容器宽度 - 若保留
flex-basis: auto（默认值），则每个子项先按自身内容宽度占位，再分配剩余空间，结果不可控
border 在 flex 子项上导致宽度计算错乱的原因
当给 flex 子项加 border（尤其是 border-width > 0），且未设置 box-sizing: border-box 时，border 会额外增加元素尺寸，突破 flex-basis 或容器约束，引发换行、溢出或对齐偏移。
典型表现：4 个 flex: 1 0 0 的子项本该一行排满，加了 1px solid 后最后一项掉到下一行。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
box-sizing: border-box，确保width/flex-basis包含 border 和 padding - 如果用
flex: 1简写，默认是flex: 0 1 auto，此时border+content容易超限；而flex: 1 0 0配合box-sizing: border-box才稳定 - 避免在子项上同时用
width和flex混用——width会干扰flex-basis计算，优先以flex-basis为准
实现“类表格单元格”对齐的最小可靠组合
要达成类似 display: table-cell 的整齐、等宽、带边框、不换行效果，仅靠 flex 就得守住三个硬条件：
- 父容器：必须设
display: flex+flex-wrap: nowrap（禁用换行） - 子项：统一用
flex: 1 0 0+box-sizing: border-box+border - 子项内文本/内容需控制溢出，例如加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，否则长文本仍会撑破
示例代码片段：
.row {
display: flex;
flex-wrap: nowrap;
}
.cell {
flex: 1 0 0;
box-sizing: border-box;
border: 1px solid #ccc;
padding: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
什么时候该放弃 flex 改用 grid
当你需要真正的二维对齐（比如多行多列都严格等宽等高、跨行跨列、首行/末行特殊处理），或者频繁遇到 flex-wrap + align-content + 边框 + 内容长度差异带来的对齐漂移时，display: grid 是更干净的选择。
Flex 是一维的，它只管“一行怎么排”或“一列怎么排”，但无法天然约束“第 2 行第 3 列必须和第 1 行第 3 列同宽”。而 grid-template-columns: repeat(4, 1fr) 一句就搞定四列等宽，border 和 box-sizing 影响也更可预测。
别硬扛——flex 很好用，但它不是万能表格替代品。真实项目里，看到三处以上 flex: 1 0 0 + border + text-overflow 堆叠时，就该停下来想 grid 了。
