flex: initial 等价于 flex: 0 1 auto，即不放大、可缩小、基准尺寸自适应内容；它并非“移除伸缩”，因仍允许 flex-shrink: 1 生效，窄屏下可能压缩变形。
flex: initial 是什么，它真能“移除伸缩”？
flex: initial 并不是专门用来“移除伸缩”的魔法开关。它只是 flex 属性的一个预设值，等价于 flex: 0 1 auto —— 即 flex-grow: 0（不放大）、flex-shrink: 1（可缩小）、flex-basis: auto（按内容或 width/height 决定初始尺寸）。所以它**保留了收缩能力**，只是关闭了扩展。
如果你期望子元素“完全不伸不缩、就按自己 content 或 width 显示”，flex: initial 通常不够用，尤其在容器变窄时，它仍会收缩（比如文字被挤出、图片被压扁）。
为什么 flex: initial 后子元素还是被压缩了？
根本原因在于：flex-shrink: 1 生效了，而浏览器默认给 flex item 设了隐式最小宽度（min-width: auto），即“至少要容下内容”。但这个规则对含内联文本、图片、或 inline-block 的元素常常失效 —— 它们实际最小宽度远大于内容，导致收缩时溢出或换行异常。
- 文字类元素（如
<p></p>、<span></span>）需额外加min-width: 0才能让flex-shrink正常计算压缩量 - 图片或 iframe 默认
min-width: auto，但若父容器太窄，它们仍可能被强制压缩变形 - 设置了
width的元素，flex-basis会取该值，flex-shrink仍基于此基础尺寸参与压缩
真正“禁用伸缩”的写法是哪些？
要让子元素彻底拒绝伸缩（既不放大也不缩小），必须显式切断两个关键行为：
-
flex-grow: 0：不争剩余空间（默认就是 0，可省略） -
flex-shrink: 0：拒绝任何压缩（这是最关键的一步，initial没做这事） -
flex-basis显式指定，避免依赖auto带来的不确定性（比如内容变化影响布局）
推荐写法：flex: 0 0 auto（内容定宽）或 flex: 0 0 200px（固定像素宽）。若元素本身有 width，也建议同步设为相同值，避免冲突。
移动端小屏下 flex-shrink: 0 导致横向滚动怎么办？
flex-shrink: 0 确保不压缩，但也意味着“宁可溢出也不妥协”。这在窄屏上极易触发水平滚动条或内容被裁切。
应对策略不是放弃 flex-shrink: 0，而是分层控制：
- 对纯图标、按钮等严格尺寸控件，用
flex: 0 0 fit-content或flex: 0 0 max-content（需注意兼容性） - 对文字区域，保留
flex-shrink: 1，但加min-width: 0+overflow: hidden或word-break: break-word防溢出 - 用媒体查询兜底：小屏时改用
flex-direction: column，让原本横向并排的项垂直堆叠，天然规避宽度竞争
真正难处理的，从来不是“怎么写 flex”，而是“哪个元素该伸、哪个该锁、哪个该折行”——这些判断得落在具体语义和交互意图上，不能只靠一个 initial 带过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
