align-items: stretch 默认生效但需满足前提：容器交叉轴尺寸明确、子项未设固定高度或覆盖对齐方式、flex-direction为row时才实现列等高，ie11存在兼容性缺陷。

align-items: stretch 是默认行为，不是魔法开关——它只在满足特定条件时才真正生效。直接写 display: flex 不等于自动等高，漏掉任一前提都会让列“各长各的”。

为什么加了 display: flex 还不等高？

最常被忽略的是容器高度来源：浏览器不会凭空猜你要多高，align-items: stretch 必须有明确的交叉轴尺寸作为拉伸基准。

• 父容器没设 height、min-height，也未被上层 flex 容器用 flex: 1 分配空间 → 拉伸无参照，视觉上“失效”
• 子元素写了 height、max-height 或 min-height: 0 → 直接覆盖 stretch 行为
• 子元素用了 align-self: flex-start 或 display: table-cell → 脱离 Flex 上下文，不参与拉伸计算
• 父容器设置了 overflow: hidden 且子项有 margin-bottom → 高度被截断，看起来不等高

flex-direction: row 和 column 对等高的影响

绝大多数人想让“同一行的多列”底部对齐，该用 flex-direction: row（默认值）；误用 column 会导致所有列垂直堆叠，每列各自占满容器高度，完全失去横向布局意义。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• flex-direction: row 下，align-items: stretch 让各列高度取**最高列的内容高度**
• flex-direction: column 下，align-items 控制的是每列内部子项的水平对齐，与列间等高无关
• 响应式中用 flex-wrap: wrap 时，stretch 只在每一行内生效，跨行不拉齐

IE11 中 align-items: stretch 失效的硬伤

IE11 对 Flex 的支持存在解析缺陷，尤其在嵌套或涉及 min-height 时，stretch 常被忽略。

• flex: 1 简写在 IE11 中不稳定，建议拆成 flex-grow: 1; flex-shrink: 1; flex-basis: auto
• 避免对子项同时设置 height 和 flex，IE 会优先按 height 渲染
• 父容器别用 min-height 替代 height，可改用 height: 1px; min-height: 100% 这类 hack
• 必要时对 IE11 单独加 display: table-cell; vertical-align: top 兜底（注意 table-cell 不换行）

等高后内容溢出或留白严重怎么办？

等高是布局层的事，内容分布是子项内部的事——强行拉伸后，短内容列底部留白、长内容列文字被截断，本质是没控制好内容对齐。

• 子项内部启用 display: flex; flex-direction: column，再用 margin-top: auto 把按钮/操作区“推”到底部
• 避免用 height 截断内容，改用 min-height + 内部 overflow: auto 控制滚动区域
• 统一 box-sizing: border-box，防止 padding/border 导致视觉高度偏差
• 调试时临时加 outline: 1px solid red 到子项，观察是否真被拉伸；再检查 computed styles 中 align-self 是否为 stretch，以及容器 height 是否为具体数值而非 auto

真正卡住人的从来不是语法，而是那些看不见的上下文约束：父容器有没有被撑开、子项有没有悄悄写死高度、IE 里那个没拆开的 flex 简写……这些细节不逐个验证，stretch 就只是个摆设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！