flex-basis是初始尺寸而非最小宽度，需配合flex-shrink: 0才能固定；flex-grow分配剩余空间，非容器宽度；flex-shrink压缩量取决于flex-basis×flex-shrink加权计算；缩写需严格按顺序避免误解析。
flex-basis 是初始尺寸，不是“最小宽度”
很多人误以为 flex-basis 类似于 min-width，设成 200px 就能“卡住不被压缩”，其实不对。它只是分配剩余空间前的起点尺寸，后续仍受 flex-shrink 影响——除非同时设 flex-shrink: 0。
常见错误现象：给侧边栏设 flex-basis: 200px，但内容一多就变窄；或容器变小时整个布局塌缩。
-
flex-basis: auto（默认）：取元素自身的width或内容宽度，不稳定，尤其文字长度变化时 -
flex-basis: 0：强制归零起点，让flex-grow瓜分全部容器宽度，适合等宽填满场景 -
flex-basis: 200px或flex-basis: 25%：需配合flex-shrink: 0才能真正“固定”（否则仍可能被压窄）
flex-grow 分配的是“剩余空间”，不是容器宽度
flex-grow 只在容器有空余时起作用，且计算逻辑是：剩余空间 = 容器主轴尺寸 − 所有项目的 flex-basis 之和。如果 flex-basis 总和已经超过容器宽度，flex-grow 完全无效。
典型误用：想让两个按钮等宽填满父容器，只写 flex: 1，结果因文字长度不同导致宽度不均——因为 flex: 1 等价于 flex: 1 1 auto，flex-basis: auto 导致基准宽度不一致。
- 要真正等宽：用
flex: 1 1 0，让所有项目从 0 开始按比例瓜分整块容器宽度 - 要保留内容宽度再扩展：用
flex: 1 1 auto，但需确保内容宽度相近，或显式设width -
flex-grow: 0的项目完全不参与扩展，哪怕有大量剩余空间
flex-shrink 压缩量取决于 flex-basis × flex-shrink，不是单纯看数值比
这是最常被误解的一点：flex-shrink: 2 的项目不一定比 flex-shrink: 1 的项目多缩一半。浏览器实际按加权公式算压缩量：单个项目压缩值 = 总溢出 × (flex-shrink × flex-basis) / 所有项目 (flex-shrink × flex-basis) 之和。
现象举例：容器宽 300px，两个项目 flex-basis 分别为 200px 和 150px，flex-shrink 都是 1 → 溢出 50px，前者压缩约 28.6px，后者压缩约 21.4px。但如果把后者的 flex-shrink 改成 2，它反而会压缩更多（约 33.3px），因为权重翻倍了。
- 想让某项目完全不缩小：必须同时设
flex-shrink: 0和明确的flex-basis（如flex: 0 0 200px） - 仅设
flex-shrink: 0不够——若flex-basis: auto，内容变长时仍可能撑开容器 - 移动端适配中，常对图标/头像设
flex: 0 0 40px，确保尺寸稳定不随文本流挤压变形
三者组合的实用缩写陷阱
flex 缩写看似简单，但省略规则容易踩坑。顺序固定为 flex-grow flex-shrink flex-basis，缺位会按规则补全，而非“留空即默认”。
比如 flex: 1 补全为 flex: 1 1 auto；flex: 1 0 补全为 flex: 1 0 auto；而 flex: 0 1 会被解析为 flex-grow: 0、flex-shrink: 1、flex-basis: auto —— 这里第二个数字是 flex-shrink，不是 flex-basis。
- 想固定宽度不伸缩：用
flex: 0 0 200px，别写flex: 0 200px（会被当flex-grow: 0、flex-shrink: 200、flex-basis: auto） - 想等比放大且允许收缩：用
flex: 1（安全，但注意flex-basis: auto风险） - 想等比放大且禁止收缩：必须写全
flex: 1 0 0，不能省略中间的0
真正难的不是记住语法，而是每次写 flex 时，脑子里得同步过一遍：这个项目的初始尺寸是多少？它该不该参与扩展？该不该参与压缩？三者是否自洽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
