Flex布局中align-items: stretch为什么没让多列等高
因为stretch只对**直接子元素**生效，且前提是父容器是display: flex、子元素**没有设置固定高度或align-self覆盖**。常见错误是把flex写在了外层容器，但实际内容列嵌套了多层div或用了float/inline-block——这时stretch根本不会触发。
实操建议：
- 检查父容器是否为
display: flex，且子元素是它的**直系子节点** - 确保子元素未设置
height、max-height或align-self: flex-start等覆盖默认拉伸行为的样式 - 若列内有
margin或padding影响视觉对齐，用box-sizing: border-box统一盒模型 - 避免在子元素上写
display: inline-block或float: left，它们会脱离Flex上下文
用flex实现多列等高时，flex-direction: column和row的区别
绝大多数人想让“同一行的多列”底部对齐，该用flex-direction: row（默认值）；误用column会导致所有列垂直堆叠，每列各自占满容器高度，反而失去横向布局意义。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row下，align-items: stretch让各列高度取**最高列的内容高度** -
flex-direction: column下，align-items控制的是每列内部子项的水平对齐，与列间等高无关 - 如果列数不固定（如响应式），配合
flex-wrap: wrap时，stretch仍只在每一行内生效，跨行不拉齐
IE11里align-items: stretch失效的典型原因
IE11对Flex的支持有硬伤：min-height在Flex子元素上常被忽略，导致内容少的列无法撑开；另外，若父容器未设明确高度（比如仅靠内容撑开），IE11可能按0高度计算拉伸基准。
兼容性补救措施：
- 给父容器加
min-height: 1px或height: fit-content（IE不支持，可退化为height: auto） - 子元素避免只依赖
min-height，改用height: 100%并确保父级有可计算高度 - 必要时对IE11单独加
display: table-cell+vertical-align: top兜底（注意table-cell不换行） - 检查是否启用了
flex: 1——IE11对flex简写解析不稳定，建议拆成flex-grow: 1flex-shrink: 1flex-basis: auto
Grid比Flex更适合多列等高？什么情况下该换
当需要**跨行/跨列对齐**、**复杂二维结构**（比如标题跨两列、右侧栏固定宽+左侧流式）、或**响应式断点频繁重排布局**时，display: grid更稳。Flex的stretch本质是一维拉伸，Grid的align-items: stretch在行/列两个维度都可控。
适用判断：
- 纯单行多列且高度由内容决定 → Flex足够，简单可靠
- 需让第2行的列和第1行同列等高（如卡片网格）→ 必须用Grid，设
grid-template-rows: 1fr - 列宽不均（如左30%/右70%）且都要等高 → Grid的
grid-template-columns更直观，Flex需配合flex-basis手动算比例 - 要兼容IE10+但不用IE9 → Grid无原生支持，别换；否则Grid代码更短、逻辑更线性
真正容易被忽略的是：等高不是目的，而是为了视觉一致性。如果列内底部有操作按钮，得考虑margin-top: auto把按钮“钉”在底部——这在Flex里靠auto外边距生效，在Grid里靠align-self: end更直接。不同方案的“锚点”位置逻辑完全不同。
