align-items: stretch对多行文本无效，因其仅作用于直接子元素（flex items），而文本内的换行行盒属于内联格式化上下文，无法参与拉伸；需将文本拆分为多个块级子项或采用line-height等视觉近似方案。
直接加 display: flex 不行，多行文本本身不是多个子元素，而是单个 <p> 或 <div> 里的连续内容——Flex 的 align-items: stretch 对它完全不生效。
为什么 align-items: stretch 对多行文本无效
Flex 的等高机制只作用于**直接子元素**（flex items），而多行文本中的“行”是行盒（line boxes），属于内联格式化上下文，不受父级 Flex 容器的交叉轴拉伸控制。即使你给 <p> 加了 display: flex，它内部的换行文本也不会被拆成多个可拉伸项。
- 常见错误现象：给包裹文本的容器设
display: flex; align-items: stretch;，但文字长短不同，视觉高度依然参差不齐 - 本质原因：文本行高由
line-height、font-size、padding等决定，不是 flex item，无法参与 stretch 计算 - 检查方法：打开开发者工具 → 查看该文本容器的 Computed
height，你会发现它等于内容自然撑开的高度，没有“拉伸痕迹”
真正起效的两种实操路径
必须把“多行文本”转换为“多个可控制高度的块级子项”，才能用 Flex 实现等高对齐：
-
路径一：语义拆分 + Flex 行容器 —— 把每段逻辑文本（如标题+描述）封装为独立
<div class="row">，外层设display: flex; flex-wrap: wrap;，每个.row内部再用display: flex; align-items: stretch;拉高其子项（如左文/右标） -
路径二：伪等高 + line-height 控制 —— 若必须保留单段文本结构，可用固定
line-height+max-height+overflow: hidden截断，配合text-overflow: ellipsis（仅限单行）或 JS 补全；但此法非真等高，仅视觉近似 - 注意：不要对
<p>直接设height或min-height后再套 Flex —— 这会阻止stretch，且破坏响应式
flex-wrap: wrap 下如何保证每行内子项等高
当使用 flex-wrap: wrap 布局多行卡片或文本块时，“每行独立等高”才是关键。此时不能只靠外层一个 Flex 容器，否则所有子项会被整体拉伸到最高项高度，导致下一行被抬高。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：将每一行封装为独立的
<div class="row">，每个.row设display: flex; align-items: stretch; - 避免陷阱：不要在行容器上设
align-content（它只控制“行与行之间”的间距，和等高无关） - 性能提示：若行数动态变化（如搜索结果），用 JS 动态生成
.row容器比纯 CSS 更可控；CSS-only 方案需预设最大行高或依赖gap配合min-height - 兼容性注意：Safari 15.4 及更早版本中，若
.row子项含border且未设box-sizing: border-box，stretch可能计算溢出
最易被忽略的一点：所谓“多行文本等高”，90% 的实际需求其实是“多块文本容器等高”。别在单个 <p> 上死磕 Flex，先确认你的 HTML 结构是否真的支持弹性子项划分——结构没对，再好的 CSS 属性也拉不出等高效果。
