Flex容器默认通过align-items: stretch实现子项等高，但需避免子项设置height、min-height或align-self等覆盖属性，多行布局下仅本行等高，跨行等高需JS或改用Grid。
flex容器默认就让子项等高，但前提是你没破坏它
Flex布局中，align-items: stretch 是默认值，这意味着所有 flex 子项（flex items）在交叉轴上会自动拉伸到容器高度——也就是「等高」。但很多人发现实际并不等高，问题通常出在子项自身设置了 height、min-height、align-self 覆盖，或内容溢出触发了最小高度限制。
- 检查子元素是否写了
height或min-height：它们会阻止 stretch 行为 - 确认没有设置
align-self: flex-start等值覆盖了父级的align-items - 文字多行换行时，若父容器没设
height，子项高度由内容撑开，此时「等高」依赖于容器有明确高度或使用align-items: stretch+ 容器可伸缩
用 align-items: stretch 实现真正等高（最常用场景）
这是最直接有效的做法，适用于单行 flex 布局（如导航栏、按钮组、卡片横排）：
.container {
display: flex;
align-items: stretch; /* 默认就是这个，显式写出来更清晰 */
}
.item {
/ 不要设 height / min-height /
/ 不要设 align-self /
}
只要容器本身高度可控（比如由内容、固定高度或 min-height 决定），所有 .item 就会严格等高。如果容器高度由最长子项决定，那其他子项也会被拉到同一高度。
遇到文字截断或溢出导致高度不一致？加 overflow 和 padding 对齐
当子项内有文本，且某一项文字更多、换行更多时，即使 align-items: stretch 生效，视觉上仍可能感觉「不齐」——因为内边距、字体基线、行高差异会影响对齐感。
立即学习“前端免费学习笔记（深入）”；
- 统一设置
padding和box-sizing: border-box - 用
line-height控制行高，避免因字体渲染差异导致基线浮动 - 必要时对文字容器加
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;截断，保证文本区域高度一致 - 避免仅靠
vertical-align（它对 flex item 无效）
多行 flex（flex-wrap: wrap）下如何保持每行内等高？
一旦启用 flex-wrap: wrap，flex 就不再把所有子项视为同一行，align-items 只作用于「当前行」内的项目。所以：第1行的三个 item 等高，第2行的两个 item 也等高，但两行之间高度可以不同。
- 若需跨行等高（即所有 item 高度完全一致），只能手动设定统一
height或用 JS 计算最高项再赋值——CSS 本身无跨行对齐能力 - 更实用的做法是放弃「绝对等高」，改用
align-content: flex-start配合min-height模拟视觉一致性 - 或者换用 CSS Grid：
grid-auto-rows: 1fr可实现真正行列等高，尤其适合卡片墙类布局
真正难的不是让 flex 等高，而是意识到「等高」在不同场景下含义不同：是单行内拉伸？是多行间统一？还是视觉上齐平？选错策略，后面所有 hack 都在补漏洞。
