flex: 1 和 flex: 1 1 0 计算结果可能完全不同，因前者等价于 flex: 1 1 0%（flex-basis: 0% 受上下文影响易退化为 auto），后者明确设 flex-basis: 0，确保所有子项从零宽度起步再均分剩余空间。
flex: 1 和 flex: 1 1 0 的计算结果可能完全不同
因为 flex 是 flex-grow、flex-shrink、flex-basis 的缩写，但单值写法会触发**隐式重置规则**：当你只写 flex: 1，浏览器实际解析为 flex: 1 1 0；而写 flex: 1 1 auto 就是明确指定三值，flex-basis 变成 auto。这两个值在空间分配时行为差异极大。
关键在于 flex-basis：它是项目“初始主轴尺寸”的基准，后续的 flex-grow 和 flex-shrink 都基于它计算剩余/溢出空间。设为 0（单值写法默认）意味着“忽略内容宽度，从零开始瓜分容器空间”；设为 auto 则尊重内容宽度或显式 width 值。
-
flex: 1→flex-basis: 0：项目不占原始宽度，所有空间由flex-grow按比例均分 -
flex: 1 1 auto→flex-basis: auto：先按内容宽或width占位，再把剩余空间均分 - 如果父容器宽度固定为
600px，两个子项都设flex: 1，它们各得300px，哪怕内容只有 “a” - 同样容器下，两个子项都设
flex: 1 1 auto，若内容宽度分别是80px和120px，则剩余400px才被均分，最终宽度约为280px和320px
flex: 0 和 flex: 0 1 auto 容易被当成等价，其实一个会收缩、一个不会
这是线上最常被误用的点之一：flex: 0 实际展开为 flex: 0 1 0，而 flex: 0 1 auto 是另一回事。区别全在 flex-shrink 是否生效，以及以什么为压缩基准。
flex-shrink 的压缩量不是简单按比例切掉宽度，而是按 flex-shrink × flex-basis 计算权重。当 flex-basis 是 0，这个乘积就是 0 —— 项目根本不会被压缩，哪怕总宽度超了容器，也会溢出。
立即学习“前端免费学习笔记（深入）”；
-
flex: 0→flex-basis: 0，flex-shrink: 1，但压缩权重 =1 × 0 = 0→ 实际不收缩，可能撑破容器 -
flex: 0 1 auto→flex-basis: auto，压缩权重 =1 × 内容宽度→ 正常参与收缩 -
flex: 0 0 auto才是真正“不伸不缩”，适合固定尺寸按钮、图标等 - 想让项目不参与伸缩又不溢出？必须显式写
flex: 0 0 auto或flex: none
flex: none、flex: auto 和 flex: 0 0 0 的语义与兼容性差异
flex: none 和 flex: auto 是 CSS 规范定义的**关键字值**，不是语法糖，它们有明确的展开逻辑和浏览器兼容边界。
flex: none 等价于 flex: 0 0 auto，即完全禁用伸缩；flex: auto 等价于 flex: 1 1 auto，即内容优先 + 均分剩余。这两个关键字在 Chrome 57+、Firefox 49+、Safari 11+ 支持良好，但在 IE11 及更早版本中不识别，会被忽略回退到 flex: 0 0 auto（IE11 实际只支持旧语法 flex: 0 0 auto）。
- 用
flex: none代替flex: 0 0 auto更语义清晰，但需确认目标环境是否支持 -
flex: auto在移动端几乎无风险，PC 端若需兼容 IE11，必须手写三值 -
flex: 0 0 0是危险写法：虽然合法，但flex-basis: 0会让项目失去内容宽度，视觉上“消失”或错位 - 调试时遇到项目莫名变窄或消失，第一反应应检查是不是误写了
flex-basis: 0
为什么 flex: 1 0 auto 比 flex: 1 更可控
很多教程说“用 flex: 1 让子项填满”，但真实项目里它往往导致文字被强行拉伸、图片变形、按钮宽度失控。根本原因是 flex-basis: 0 抹杀了内容自然尺寸。
flex: 1 0 auto 是更安全的替代：允许放大（flex-grow: 1），禁止缩小（flex-shrink: 0），同时保留内容宽度（flex-basis: auto）。它既避免溢出，又防止压缩，还支持响应式伸展。
- 导航菜单项常用
flex: 1 0 auto：文字多就宽些，少就窄些，但不会被压扁或撑爆 - 表单输入框搭配按钮时，输入框设
flex: 1 0 auto，按钮设flex: 0 0 auto，布局稳定 - 不要依赖
flex: 1处理含文字的块级元素——除非你真希望它无视内容宽度从零开始分 - Chrome DevTools 的 Layout 面板里，选中元素看 “Flex Basis” 字段，能直接验证你写的值是否被正确解析
flex 的三值写法不是炫技，而是对空间分配逻辑的精确声明。漏掉任何一个值，都可能让浏览器按规范自动补上一个你没意识到的默认值，进而引发布局漂移。 
