align-items: stretch是Flex子项默认等高的关键，只要未显式修改且子项无固定height/min-height，它们会自动拉伸填满交叉轴；需配合min-height: 0和box-sizing: border-box确保嵌套与盒模型正确。
flex布局中align-items设为stretch是默认等高的关键
Flex容器子项自动等高，不是靠“撑开”或“模拟”，而是align-items的默认行为。只要没显式改它，且子项没设height或min-height覆盖，它们就会拉伸填满交叉轴（通常是高度方向）。
常见错误现象：div里文字少的项看起来矮、背景色没到底部——其实是子项内部内容没占满高度，但元素本身已等高；只是你忘了给子项加display: flex; flex-direction: column;或height: 100%来让内容也撑开。
- 确保父容器设了
display: flex，且没加align-items: flex-start之类覆盖默认值 - 子项不要设固定
height，否则会破坏拉伸逻辑；用min-height更安全 - 如果子项内有
padding或border，记得加box-sizing: border-box，否则实际高度会超出计算值
多列卡片布局中flex: 1和flex: auto的区别直接影响等高效果
在响应式卡片栅格里，常对子项写flex: 1，但它隐含flex-grow: 1; flex-shrink: 1; flex-basis: 0——这意味着所有项从零宽度/高度开始均分空间，强制等高；而flex: auto（即flex: 1 1 auto）以内容自然尺寸为基准再分配，容易导致高度不一致。
使用场景：三栏新闻卡片，每张卡有标题、摘要、按钮，摘要长度不一。用flex: 1能保证视觉整齐；若用flex: auto，摘要短的卡片整体就矮。
-
flex: 1适合需要严格对齐底部按钮或统一留白的场景 - 若某列需固定宽度（如侧边栏），应单独设
flex: 0 0 240px，避免它参与等高拉伸 - IE11对
flex: 1支持不稳定，遇到兼容性问题时可降级为flex: 1 1 0%
当子项含绝对定位元素时，等高可能“失效”的真实原因
绝对定位元素脱离文档流，不影响父项高度计算，但flex等高只作用于flex子项自身盒模型，不关心内部定位。所以你会看到：父容器高度一致，但某个卡片里的position: absolute按钮悬在半空，仿佛“没对齐”。
这不是flex失效，而是你把对齐责任错交给布局层。真正要对齐的是按钮位置，不是容器高度。
- 避免用
bottom: 0依赖父项“真实内容高度”，改用margin-top: auto配合display: flex; flex-direction: column让按钮贴底 - 如果必须用绝对定位，确保父项设
position: relative，且按钮的bottom值基于父项总高度（此时父项已等高，值是可靠的） - 检查
transform: translateY(-50%)类居中是否意外干扰了基线，这种操作在flex等高中易引发视觉偏差
嵌套flex容器中min-height: 0常被忽略却决定等高能否穿透
Flex子项内部再套一层flex容器时，浏览器对它的最小高度有隐式限制（比如min-height: auto），会导致内层无法压缩或拉伸，从而阻断外层的等高传递。典型表现：外层三列高度一致，但其中某一列的内嵌列表区域明显塌陷。
这是CSS规范里“flex item minimum size algorithm”的副作用，不是bug，但必须手动干预。
- 所有作为flex子项的容器，只要它内部还要flex布局，就加上
min-height: 0 - 同理，水平方向用
min-width: 0防溢出，尤其在text-overflow: ellipsis场景下 - Vue/React组件中，如果封装了
Card组件且内部用了flex，记得在组件根元素上声明min-height: 0，别等上线才发现某处卡片不对齐
等高不是“开了flex就自动好”，关键在交叉轴控制权有没有被无意覆盖，以及嵌套层级中最小尺寸限制有没有被清除。最常漏掉的就是min-height: 0和box-sizing: border-box这两处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
