flex-grow 拉伸失效主因是父容器未设 display: flex/inline-flex、子项存在显式尺寸（width/height/min-width/min-height）、父容器高度为 auto 导致无剩余空间、flex-basis 过大或 align-items: stretch 在交叉轴无确定长度时失效。
flex-grow 拉伸失效的常见原因
写了 flex-grow: 1 却没拉伸，大概率不是属性写错了，而是父容器或子项本身“拦住了”拉伸行为。
- 父容器没设
display: flex或display: inline-flex—— 子元素根本不会进入 Flex 上下文 - 子项设置了
width、height、min-width、min-height等显式尺寸，会直接覆盖flex-grow的空间分配逻辑 - 父容器高度为
auto（比如仅靠内容撑开），而你在垂直方向用flex-direction: column+flex-grow，此时没有可分配的“剩余高度”，拉伸自然无效 -
flex-basis值过大（如flex-basis: 500px），导致主轴剩余空间为负，flex-grow完全不触发
align-items: stretch 在垂直方向不生效怎么办
align-items: stretch 是 Flex 默认行为，但它只在交叉轴有确定长度时才起作用——换句话说，它不“创造”高度，只“填满已有高度”。
- 检查父容器是否设置了
height、min-height（例如min-height: 100vh）或被上级 Grid/Flex 容器限定了尺寸 - 确认子项没写
align-self: flex-start、height、max-height或position: absolute—— 这些都会中断 stretch - 多个子项共存时，只要其中一项设了
min-height: 44px，其余项也会被这个最小值“锚定”，而非自由拉伸 - 移动端图片未加载完成导致父容器塌缩，可用
min-height: 100vh+img { height: auto; max-width: 100% }防止跳变
想让卡片等高又等宽，flex: 1 不够用
单纯写 flex: 1 很容易因内容差异导致卡片高度不一致，尤其当文字行数、图片尺寸不统一时。
- 统一设
flex: 1 0 0（即flex-grow: 1,flex-shrink: 0,flex-basis: 0），强制按比例瓜分主轴剩余空间，避免内容尺寸干扰 - 配合
align-items: stretch（默认）确保交叉轴自动拉伸，但前提是父容器有明确高度 - 若需响应式断点，用
flex-basis替代百分比宽度，例如flex-basis: calc(33.33% - 20px)+gap: 20px，比width: 33%更可靠 - 卡片内文字溢出时，用
overflow: hidden+text-overflow: ellipsis+white-space: nowrap控制，别依赖弹性拉伸来“撑开”内容
用 CSS 实现视觉弹性拉伸（非布局，是动效）
这里说的不是 Flex 拉伸，而是按钮、卡片这类元素被拖拽/悬停时的橡皮筋式形变效果——它和布局无关，纯靠 transform 和关键帧。
立即学习“前端免费学习笔记（深入）”；
- 禁用
scale()：它等比放大，没有张力感；改用scale3d(1.35, 0.65, 1)，横向延展 + 纵向微压，实测更真实 - 贝塞尔曲线必须过冲：推荐
cubic-bezier(0.34, 1.56, 0.64, 1)，y 坐标超出 [0,1] 是实现回弹的关键 - 动画必须四阶段：拉伸 → 过冲 → 回抽 → 缓停，总时长控制在
0.6s–0.8s，100% 帧严格回到scale3d(1, 1, 1) - 含图标时，给
<svg>或<i>加flex-shrink: 0，否则会被压缩变形
真正难的不是写对某一行 CSS，而是判断当前场景要的是“布局弹性”（Flex 分配空间）还是“视觉弹性”（transform 动效）——前者管结构，后者管反馈，混用反而会让元素既拉不伸又动不顺。
