Flex子项默认等高源于align-items: stretch，但需父容器在交叉轴有明确高度；否则退为内容高度。关键在于父容器尺寸、子项box-sizing、flex属性选择及避免脱离文档流的布局方式。
flex子项默认等高，但只在交叉轴有参照时生效
Flex子项自动等高不是“魔法”，而是align-items: stretch的默认行为——但它需要父容器在交叉轴方向提供可计算的高度依据。如果父容器本身高度未定义（比如没设height、min-height，也没被其他布局约束），那子项就退回到内容高度，看起来“不等高”。
常见误判场景：三张卡片用display: flex横向排列，其中一张摘要很短，背景色没到底部。这不是flex失效，而是卡片内部内容没撑满自身高度，而卡片元素本身其实已等高。
- 确保父容器有明确的交叉轴尺寸：比如
height: 400px或min-height: 300px；若想自适应内容又保持等高，可用min-height: fit-content（注意旧版 Safari 需加-webkit-min-content） - 子项不要写
height: 100%——它在无父高时无效，还可能干扰stretch - 子项内若含
padding或border，务必加box-sizing: border-box，否则实际高度会超出拉伸预期
flex: 1 和 flex: auto 对等高效果影响截然不同
写flex: 1会让子项强制均分剩余空间，从而严格等高；而flex: auto（即flex: 1 1 auto）以内容自然尺寸为起点再分配，容易导致高度参差。
典型场景：响应式新闻卡片栅格，每张卡含标题、摘要、按钮。摘要长度不一，但底部按钮需对齐——这时必须用flex: 1，不能依赖flex: auto。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，所有项从零开始拉伸，结果必然等高 -
flex: auto中flex-basis: auto，各子项先按内容高度占位，再分配剩余空间，高度差异保留 - IE11对
flex: 1支持不稳定，可降级为flex: 1 1 0%保底
绝对定位、浮动、固定高度会破坏等高逻辑
Flex等高只作用于子项自身的盒模型，不感知内部结构。一旦子项里用了position: absolute或float，或者子项自己写了height: 200px，外部等高依然成立，但视觉上可能“错位”。
例如：某张卡片内按钮用position: absolute; bottom: 0，而该卡片因摘要短、内容高度小，按钮就会悬空——不是flex没拉伸它，是它内部脱离了文档流，没参与内容高度计算。
- 子项设
height或max-height会直接覆盖stretch，等高失效 -
align-self: flex-start显式覆盖单个子项的交叉轴对齐，也会退出等高 - 浮动子项未清除时，父容器高度塌陷，整个flex布局失去高度参照，等高自然失效
多行flex容器（wrap）下，每行各自等高而非全局等高
当父容器设了flex-wrap: wrap，子项换行后，align-items: stretch只在**每一行内**生效，不同行之间高度互不影响。这意味着第一行三张卡等高，第二行两张卡另起一组等高，但两行高度可能不同。
如果目标是所有卡片全局等高（比如瀑布流式卡片墙），flex-wrap就不适用，得换display: grid配grid-template-rows: 1fr，或用JS计算最大高度后统一赋值。
- 想让换行后仍全局等高？目前纯CSS无可靠方案，
grid是更合适的选择 -
align-content: stretch控制行与行之间的对齐，但不改变行内等高逻辑 - 避免在
wrap容器里混用flex: 1和flex: none，会导致行内高度计算混乱
height: 100%、display: flex; flex-direction: column或min-height: 100%来保证——这步漏了，再严格的flex等高也看不出效果。 
