display: flex后子元素不等高，是因为align-items: stretch需父容器有明确交叉轴高度且子元素未设height/min-height等覆盖属性，否则拉伸失效。

加了 display: flex 还不等高，不是 Flex 不行，而是 stretch 没拿到可拉伸的基准高度，或被子项样式悄悄关掉了。

为什么 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 → 主动退出拉伸队列
• 子项内部有未约束的 <img>（缺 max-width: 100% 或 height: auto）→ 撑高单列，导致 stretch 基准错误

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 常被忽略。关键应对点：

• 避免对子项同时写 height 和 flex —— IE 会优先按 height 渲染
• flex: 1 在 IE11 中不稳定，拆成 flex-grow: 1; flex-shrink: 1; flex-basis: auto
• 父容器别用 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 计算方式不同造成视觉误差
• 真正容易被忽略的是：等高只在初始渲染时计算一次；JS 异步加载内容或字体延迟重排后，高度可能突变，stretch 不会自动重触发

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