flex多列等宽等高需容器设align-items: stretch和min-height，子项禁用height及align-self；ie需flex: 1 1 0，grid更稳但不兼容ie。
flex布局下多列等宽的默认行为为什么不管用
直接写 display: flex + flex: 1，列宽看似均分，但只要内容高度不同，视觉上就“不齐”——这不是bug，是flex默认只按主轴（水平）分配空间，交叉轴（垂直）完全放任自流。
常见错误现象：flex: 1 后各列底边参差不齐；加了 align-items: stretch 也没用，因为容器没设固定高度或最小高度，子项无法“拉伸”到统一基准。
- 必须显式触发交叉轴拉伸：给容器加
align-items: stretch（这是默认值，但别依赖，默认有时被重置） - 容器本身不能是
height: auto且无约束——至少得有min-height或父容器撑高 - 子项不能自己设
align-self: flex-start这类覆盖值，否则单列脱离拉伸规则
让所有列真正“一样高”的关键两步
不是靠子项设高度，而是靠容器控制拉伸基准 + 子项放弃自身高度干扰。
- 给父容器加
display: flex和align-items: stretch - 每个子项去掉
height、min-height、max-height，也别设align-self - 如果列内内容溢出导致换行错位，统一用
overflow: hidden或word-break: break-word控制
示例结构：
.container {
display: flex;
align-items: stretch;
min-height: 200px; /* 必须有这个，否则 stretch 无参考 */
}
.item {
flex: 1; /* 等宽 */
/* 不写 height / align-self */
}
flex等宽+等高的兼容性陷阱
IE10/11 对 flex: 1 的解析和 stretch 行为有偏差，尤其在嵌套 flex 容器里容易失效。
- IE下建议用
flex: 1 1 0替代简写flex: 1，避免基线计算误差 - 如果容器高度由内容撑开（非固定/最小高度），IE可能完全忽略
stretch，此时需补height: 100%并确保父级有高度 - 移动端 Safari 旧版本对
min-height+stretch组合偶有渲染延迟，可加transform: translateZ(0)强制硬件加速
比flex更稳的备选：CSS Grid方案
当flex在复杂嵌套或动态内容下反复失准时，display: grid 更直接可控。
- 等宽：用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))（响应式）或1fr 1fr 1fr（固定列数） - 等高：grid天然按轨道对齐，无需额外设置，只要不给子项设
align-self: start - 注意：Grid在IE中基本不可用，如需兼容IE，别切过去
实际项目里，flex方案够用但得盯住容器高度和子项约束；Grid干净利落，但得权衡兼容范围。真正难的不是写哪行代码，是判断当前布局是否真需要“绝对等高”——很多时候视觉对齐靠 padding/margin 微调反而更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
