加了 display: flex 却没等高，是因为 align-items: stretch 缺乏明确的交叉轴高度基准或被子项 height/min-height、align-self、flex-direction: column 等样式禁用；需确保父容器有 height/min-height 或 flex: 1，子项无固定高且保持 flex-direction: row。
加了 display: flex 却没等高，不是 Flex 不灵，而是 align-items: 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 会导致所有列垂直堆叠，每列各自占满容器高度，完全失去横向布局意义。
flex-direction: column 下：align-items 控制的是每列内部子项的水平对齐，与列间等高无关；此时拉伸的是宽度，不是高度。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
响应式中用 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 异步加载内容后，align-items: stretch 不会自动重触发 —— 这时候得靠 resize 监听、IntersectionObserver 或直接切到 grid-template-rows: 1fr 才能兜住动态高度变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
