display: flex 默认实现真等高，子项自动拉伸至父容器高度；align-items: baseline 仅对齐文字基线，不拉高容器，且 IE10–11 行为不一致。
直接用 display: flex 就能实现真等高，不需要 JS、不用 hack、不靠背景图——只要父容器设了 display: flex，子项默认就拉伸到同一高度。
为什么 align-items: baseline 不行
它只对齐文字基线，不是拉高容器。子项各自按内容算高，上下留白不一致，视觉上“看似对齐”，但一加图标、换字体、改 padding，立刻错位。IE10–11 对它的实现还和现代浏览器不一致，调试时容易误判。
-
align-items: baseline是排版微调手段，不是布局工具 - 它不会触发父容器重算高度，也不会让短内容的子项“撑开”
- 如果你看到“等高”，大概率是内容刚好凑巧，不是机制保障
display: flex 实现等高列的关键控制点
Flex 默认行为已足够，但几个细节决定是否稳定生效：
- 父容器必须设
display: flex，不能只靠子项自己加flex - 子项不能显式设
height（如height: 200px）或align-self: flex-start等会覆盖拉伸的行为 - 避免在子项里写
height: 100%—— 它依赖父级有明确高度，而 Flex 的拉伸是基于容器可用空间，不是继承 - 需要等宽？用
flex: 1；需要固定宽？用flex: 0 0 200px；要留间隙？优先用gap，别靠margin（IE11 不支持gap，可退为padding+ 外层负边距）
多行等高？别硬套 flex-wrap
flex-wrap: wrap 只保证“每行内”等高，行与行之间高度独立。比如第一行三列最高项 300px，第二行三列最高项 180px，那两行高度就不同。
- 真要所有行都严格等高（比如卡片网格），必须切到
display: grid，配grid-auto-rows: 1fr或grid-template-rows: repeat(3, 1fr) - Flex 下强行模拟多行等高，得给每行单独包一层
display: flex容器，再统一设最小高度，但响应式断点时逻辑复杂 - Safari ≤15.4 对
grid-auto-rows: 1fr有计算 bug，可临时用minmax(0, 1fr)替代
兼容 IE10–11 的注意事项
它们对 Flex 的 align-items: stretch 支持不稳定，尤其当子项含 vertical-align 或 line-height 差异时，拉伸可能失效。
- 显式写
align-items: stretch，别依赖默认值 - 子项内部避免
vertical-align（对 Flex 子项无效，但会干扰你判断） - 如果必须支持 IE9 及以下，
display: table是更稳的选择：父设display: table; width: 100%，子设display: table-cell，天然等高，但失去响应式换行能力
真正难的不是“怎么写”，而是意识到：等高是容器级行为，不是子项自己能决定的；一旦混用 height、vertical-align、flex-shrink: 0 这类限制性属性，拉伸就容易被悄悄打断——检查时重点盯这些地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
