Flexbox让多列高度一致需父容器设display: flex且无flex-direction: column，子项不设height，父容器须有明确高度约束；等高是天然行为，非模拟或hack。
Flexbox怎么让多列高度一致
用 display: flex 在父容器上，子项默认就等高。这不是“模拟”或“hack”，而是 Flexbox 的天然行为——主轴方向（默认水平）不影响交叉轴（默认垂直）的对齐逻辑，只要子项没设固定高度，它们就会被拉伸到容器最大交叉轴尺寸。
- 父元素必须设
display: flex，且不能有flex-direction: column（否则主轴变垂直，等高逻辑失效） - 子项不要写
height或min-height，否则会覆盖拉伸行为 - 如果子项内有内容溢出，记得加
overflow: hidden或调整内部flex嵌套，否则可能撑破父容器
为什么用了flex还是不等高
常见原因是父容器高度未被约束，导致子项“无参照可拉”。Flex 等高依赖于交叉轴（y 轴）有明确尺寸边界——要么父容器有固定 height / min-height，要么它被上级容器限制（比如在 flex 或 grid 中受控）。
- 检查父容器是否真的“有高”：用浏览器开发者工具看 computed height 是否为
auto且实际值为 0 - 避免在父容器上同时用
align-items: flex-start和期望等高——这会关闭拉伸，改用stretch（默认值） - IE11 对
flex: 1拉伸支持不稳定，若需兼容，子项显式写flex: 1 0 auto比只写flex: 1更可靠
如何让文字在等高列里垂直居中
等高 ≠ 内容垂直居中。列等高是容器行为，内容居中得靠子项自己的 display: flex 或 align-items 控制。
- 在每个子列内部加
display: flex; flex-direction: column; justify-content: center; - 如果子列里只有单行文本，更轻量的做法是：
display: flex; align-items: center; height: 100%; - 慎用
line-height匹配容器高——一旦列高动态变化（比如响应式），它就失效；flex是唯一可靠的响应式垂直居中方案
和CSS Grid比，Flexbox做等高列有什么代价
Flexbox 等高是“单行布局”的副产品，本质是把所有子项当作同一行的弹性项目来拉伸。这意味着：它不适合多行、错位、跨列等复杂网格场景；一旦换行（flex-wrap: wrap），等高只在当前行内生效，不同行之间高度不一致。
立即学习“前端免费学习笔记（深入）”；
- 两列以上、需要响应式断行时，
flex-wrap会让等高失效——这时该切到display: grid，用grid-template-rows: 1fr - Flexbox 对齐依赖父容器尺寸，Grid 可以脱离父容器高度独立定义轨道，更适合内容驱动的布局
- 移动端小屏下，Flexbox 的
flex: 0 0 100%换行比 Grid 的grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))更难控制断点逻辑
等高本身不难，难的是搞清“谁在控制高度”——Flexbox 把权力交给了父容器，而很多人忘了给父容器一个说得出口的高度。
