flex: auto 等价于 flex: 1 1 auto，允许收缩且以内容宽度为基准；flex-grow: 1 单独使用等价于 flex: 1 0 0，不收缩、以0为基准，忽略子元素原有尺寸。
flex: auto 和 flex-grow 的区别到底在哪
直接说结论：flex: auto 等价于 flex: 1 1 auto，而 flex-grow: 1 单独使用时等价于 flex: 1 0 0。关键差异在第二项（flex-shrink）和第三项（flex-basis）——前者允许收缩且以内容宽度为基准，后者默认不收缩、以 0 为基准，会忽略子元素原本的宽高。
什么时候该用 flex: auto 而不是 flex-grow: 1
当你希望子元素「按内容自然撑开，再均分剩余空间」时，选 flex: auto；若只想「强行均分容器全部宽度，完全无视子元素原有尺寸」，才用 flex-grow: 1。
- 导航栏中图标按钮（固定宽）+ 文字标题（自适应）+ 操作按钮（固定宽）→ 标题用
flex: auto，两边按钮设固定宽 - 表单行里
label（窄）和input（占满剩余）→input设flex: auto，它会先按自身min-width或内容宽度起步，再伸展 - 误用
flex-grow: 1可能导致文字被过度压缩、图标变形，尤其在小屏下
flex-basis: auto 和 flex-basis: 0 的实际表现
flex-basis 是分配剩余空间前的“初始大小”。设为 auto（如 flex: auto 所带）会尊重子元素的固有尺寸（比如图片的原始宽、文字的 inline width）；设为 0（如 flex-grow: 1 隐含）则直接归零，所有空间全靠 grow 填充，容易让文字换行异常或图片比例错乱。
- 一个
div包含短文本 “OK”，设flex-grow: 1→ 它会被拉宽到填满整行，文字左右留白巨大 - 同样元素设
flex: auto→ 它只比 “OK” 宽一点（加 padding 后），其余空间留给兄弟节点 - 检查 computed style 时，注意看浏览器最终解析出的
flex-basis值，不是写上去的那行代码
兼容性和常见陷阱
IE10–11 对 flex: auto 支持不完整，会降级为 flex: 1（即 1 1 0），导致意外收缩。如需兼容，建议显式写全：flex: 1 1 auto，并测试小屏下是否溢出。
立即学习“前端免费学习笔记（深入）”；
- 不要混用
width和flex: auto：当width与flex-basis冲突时，多数现代浏览器以flex-basis为准，但 Safari 旧版本可能优先width - 子元素含
white-space: nowrap时，flex: auto仍会尝试撑开，但若容器太窄，内容可能溢出而非换行——需配合min-width: 0或overflow: hidden - Flex 容器设了
flex-wrap: wrap时，flex: auto仅在单行内生效；换行后每行重新计算，行为不变
flex: auto 更贴近设计直觉，但得盯着真实内容和断点反复调。 
