flex-1 不能替代 align-items: stretch，因其仅分配主轴剩余空间，不影响交叉轴拉伸；等高由父容器默认的 items-stretch 控制，flex-col 时拉伸宽度而非高度。
为什么 flex-1 不能直接替代 align-items: stretch
很多人看到卡片高度不一致，第一反应是给每个子项加 flex-1，结果发现没用——因为 flex-1 控制的是主轴（默认水平方向）上的剩余空间分配，它对交叉轴（垂直方向）的高度拉伸毫无影响。真正起等高作用的，是父容器的 items-stretch（即 align-items: stretch），而这个类在 Tailwind 中是默认启用的，无需显式写。
常见错误现象：
- 加了
flex-1但列高依然参差不齐 - 用了
flex-col后发现“等高”变成了等宽（stretch 作用到了宽度上）
关键点：
-
flex-row（默认）时，items-stretch拉伸高度；flex-col时，它拉伸宽度 -
flex-1只应在需要子项主动占满剩余主轴空间时使用（比如侧边栏+内容区），不是等高的必要条件 - 若子项本身有
height、max-height或align-self-start，会直接覆盖items-stretch
用 grid 实现多行等高卡片更稳，但要注意 grid-template-rows 的写法
Flex 在 flex-wrap 多行时，每行各自等高，跨行不统一——这是最常被忽略的“假等高”陷阱。Grid 则天然支持整组卡片按最高项统一高度，前提是别乱写行定义。
正确做法：
- 用
grid grid-cols-3 gap-4启动网格，不写grid-rows——此时浏览器自动按内容生成行，且同行内各列由items-stretch拉齐 - 若要强制所有卡片严格等高（单行或多行都一样），改用
grid grid-cols-3 grid-rows-1或grid grid-cols-3 grid-auto-rows-fr - 响应式场景推荐
grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))]，配合gap，不用管行高也能稳定等高
容易踩的坑：
- 写了
grid-rows-max-content→ 等高失效 - 在卡片内部用了
h-full却忘了父容器没设高度 → 子项高度计算为 0 - IE11 下需补
ms-grid-columns，且auto-fill不支持，得退化为固定列数
移动端堆叠时如何取消等高？别只靠 flex-col
小屏下把横向等高列改成纵向堆叠很常见，但很多人只加 flex-col，结果卡片还是强行等高——视觉上变成一堆超高空白块。这是因为 items-stretch 在 flex-col 下依然生效，只是拉伸的是宽度，而高度由内容决定；但若父容器有最小高度或 flex 容器被撑开，仍可能残留等高痕迹。
稳妥做法：
- 堆叠时显式重置对齐：加
sm:flex-row items-stretch md:items-start，让大屏保持等高，小屏取消 - 或者直接用
sm:items-start覆盖默认的 stretch - 如果卡片内用了
flex-1+mt-auto布局，堆叠后记得加sm:flex-none防止过度拉伸
调试建议：
- 临时加
outline-1 outline-red-500看父容器实际尺寸 - 检查是否从第三方组件库继承了全局
items-start，它会静默覆盖你的设置
卡片内部内容不齐？flex-1 和 mt-auto 才是关键
即使外部列已等高，卡片内部标题长短不一、按钮位置飘忽，用户照样觉得“不整齐”。这时 items-stretch 已无能为力，必须靠子项内部的 flex 布局来规整。
典型结构：
<div class="flex flex-col h-full"> <h3 class="line-clamp-2">标题</h3> <div class="flex-1">正文</div> <button class="mt-auto">操作</button> </div>
要点说明：
-
h-full是前提，确保卡片内容区有明确高度上下文 -
flex-1让正文区域主动撑开，避免空白挤压按钮 -
mt-auto把按钮“吸附”到底部，比固定margin-top更可靠 -
line-clamp-2配合display: -webkit-box截断长标题，防止单张卡片被顶高
注意：flex-1 在 Grid 卡片里同样有效，只要卡片本身是 flex flex-col 且高度可计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
