flex: 1 1 auto 中三个值依次对应 flex-grow、flex-shrink、flex-basis；flex-grow 为 1 表示等比放大剩余空间，flex-shrink 为 1 表示允许等比缩小，flex-basis 为 auto 表示初始尺寸由内容或显式宽高决定。
flex: 1 1 auto 中的三个数字分别对应什么
这三个值依次是 flex-grow、flex-shrink、flex-basis，顺序固定，不能调换。省略时按规则补全：只写一个值（如 flex: 1）时，它被当作 flex-grow，flex-shrink 默认为 1，flex-basis 默认为 auto；写两个值（如 flex: 1 0）时，第二个是 flex-shrink，flex-basis 回退为 auto。
为什么 flex: 1 和 flex: 1 1 0 效果完全不同
关键在 flex-basis 的取值差异：
-
flex: 1等价于flex: 1 1 auto：项目基准宽度取内容宽或显式width，剩余空间 = 容器宽 − 所有项目的flex-basis之和 -
flex: 1 1 0中flex-basis: 0：所有项目初始宽度视为 0，剩余空间 = 容器宽，直接按flex-grow比例瓜分整块容器宽度 - 常见误用：想让多个项目等宽填满容器却写了
flex: 1，结果因文字内容宽度不同导致不均等；应改用flex: 1 1 0或显式设flex-basis: 0
flex-shrink 不是“按比例压缩”，而是按 flex-shrink × flex-basis 加权压缩
这是最容易误解的一点。当项目总宽度超出容器时，浏览器不会简单地按 flex-shrink 数值比来缩：flex-shrink: 2 的项目并不一定比 flex-shrink: 1 的项目少一半宽度。
- 压缩量计算公式：单个项目压缩值 = 总溢出 × (
flex-shrink×flex-basis) / 所有项目 (flex-shrink×flex-basis) 之和 - 这意味着
flex-basis越大、flex-shrink越高，该项目承担的压缩量就越大 - 若想让某个项目完全不缩小，必须同时设
flex-shrink: 0和明确flex-basis（比如flex: 0 0 200px），仅设flex-shrink: 0不够，因为flex-basis: auto可能随内容变化
flex: none 和 flex: auto 这两个快捷值的实际展开
它们是语义化简写，但展开后行为差异明显，不能混用：
立即学习“前端免费学习笔记（深入）”；
-
flex: none→flex: 0 0 auto：不放大、不缩小、基准宽度由内容决定。适合图标、按钮等“固定尺寸”元素 -
flex: auto→flex: 1 1 auto：可放大可缩小，基准宽度仍由内容决定。适合需要响应式伸缩的文本区域 - 注意：两者都含
flex-basis: auto，所以如果项目内有长单词或未断行内容，仍可能溢出；此时需配合min-width: 0或overflow-wrap: break-word
flex 缩写看着简洁，但每个参数都在参与真实的空间分配逻辑。最常被忽略的是 flex-basis 的隐式取值 —— 它不像 width 那样直观可见，却直接决定 flex-grow 和 flex-shrink 的计算起点。 
