flex: 1 0 200px 严格按顺序解析为 flex-grow: 1（可伸展）、flex-shrink: 0（不收缩）、flex-basis: 200px（主轴初始尺寸200px，优先级高于width）。
flex 属性的三个值分别对应 flex-grow、flex-shrink 和 flex-basis，顺序固定，不能调换。搞错顺序或省略时默认补值，容易导致布局意外收缩或撑满。
flex: 1 0 200px 这类三值写法怎么解析？
必须按 flex-grow flex-shrink flex-basis 严格顺序理解：
-
1是flex-grow：容器有剩余空间时，该项目按比例 1 占用（与其他flex-grow> 0 的项目一起瓜分） -
0是flex-shrink：空间不足时，该项目完全不缩小（哪怕文字溢出或内容被裁剪） -
200px是flex-basis：主轴初始尺寸设为 200px，优先级高于width；若父容器是flex-direction: column，则控制的是高度
为什么 flex: 1 和 flex: 1 1 0% 效果不同？
表面都“撑满”，但底层行为差异明显：
-
flex: 1等价于flex: 1 1 0%——flex-basis是0%，意味着项目初始尺寸为 0，所有空间都靠flex-grow拉伸出来 -
flex: 1 1 auto（如flex: auto）中flex-basis: auto会先取元素自身内容宽度（比如文字长度、图片固有宽），再分配剩余空间 - 实际影响：含文字的
flex: 1项可能比flex: auto更“贪吃”空间，尤其在多列布局中易挤压其他项
常见简写值对应的完整展开容易踩坑
这些快捷写法背后隐含默认值，一不留神就违背直觉：
立即学习“前端免费学习笔记（深入）”；
-
flex: 0→flex: 0 1 0%：不放大，但会缩小（flex-shrink: 1），内容多时可能被压缩变形 -
flex: none→flex: 0 0 auto：既不放大也不缩小，尺寸由内容或width/height决定，适合固定尺寸侧边栏 -
flex: initial→flex: 0 1 auto：最接近“重置”行为，但注意它仍允许收缩，不是完全锁定尺寸 - 漏写
flex-shrink（如只写flex: 1 200px）→ 解析为flex: 1 1 200px，不是你想要的“不收缩”
真正关键的不是记住所有等价写法，而是每次写 flex 时心里默念一遍：我要它在有空余时怎么涨？挤不下时怎么缩？起手尺寸是多少？这三个问题没想清，光套快捷值迟早掉坑里。
