flex-grow:1不能无条件代替width:100%，前者分配剩余空间，后者强制占满父宽；仅当唯一子项、无flex-basis限制且无内容撑宽时视觉效果才接近。
flex-grow:1 和 width:100% 在 Flex 容器里根本不是一回事
直接说结论：flex-grow:1 不能无条件代替 width:100%，尤其当子项本身有固有尺寸（比如带内容的 div、图片、输入框）或存在其他 flex 项时，两者行为差异非常明显。
关键区别在于：前者是「分配剩余空间」的弹性策略，后者是「强行占满父容器宽度」的静态布局指令。在 Flex 容器中，width 属性仍会参与初始主轴尺寸计算，而 flex-grow 是在那之后才起作用的。
flex-grow:1 在什么情况下看起来像 width:100%
只有当满足全部以下条件时，flex-grow:1 的视觉效果才接近 width:100%：
- 父容器是
display:flex且主轴为水平（flex-direction:row） - 该子项是容器内唯一子元素
- 该子项没有设置
flex-basis（或显式设为auto）、没有min-width/max-width限制 - 子项内部内容不撑宽（例如空
div或纯文本但未换行）
此时 flex-grow:1 会让它吃掉所有剩余空间——而因为没其他兄弟项，剩余空间 ≈ 父容器宽度，所以“碰巧”填满。但这是结果巧合，不是机制等价。
立即学习“前端免费学习笔记（深入）”；
width:100% 在 Flex 容器里会被 flex-basis 覆盖
很多人以为给 flex 子项加 width:100% 就能强制占满，但实际中常失效。原因在于：width 仅在 flex-basis:auto 时作为初始主轴尺寸参考；一旦你写了 flex-basis:0（常见于 flex:1 缩写），width 就完全被忽略。
典型陷阱示例：
.item {
flex: 1; /* 等价于 flex-grow:1; flex-shrink:1; flex-basis:0 */
width: 100%; /* 这行无效 */
}此时该元素主轴起始尺寸是 0，再靠 flex-grow:1 拉伸——拉伸的是「剩余空间」，不是父容器宽度。如果父容器有 padding 或其他 flex 项占位，它就永远达不到 100% 视觉宽度。
真实场景下怎么选：看你要控制的是“尺寸来源”还是“空间分配”
用 width:100% 的典型场景：
- 表单控件（如
input）需要严格匹配父容器宽度，且父容器宽度已知稳定 - 响应式卡片内层结构需继承外层宽度，不希望受兄弟项影响
- 配合
box-sizing:border-box做精确像素对齐
用 flex-grow:1 的典型场景：
- 导航栏中 logo 占固定宽，其余菜单项均分剩余空间
- 卡片布局中头图自适应宽度，文字区域撑满剩余高度（配合
flex-direction:column） - 工具栏按钮组，让最后一个按钮自动伸展填满右侧空白
最易被忽略的一点：当同时设置 flex-grow:1 和 width:100% 时，若父容器宽度变化频繁（比如响应式断点切换），width 可能引发重排，而 flex-grow 更依赖 flex layout 的重算逻辑——两者触发时机和性能表现并不一致。
