flex值分配需依布局意图匹配：固定尺寸设flex:0 0 240px，自适应主内容用flex:1 1 0，文字块用flex:0 1 auto，等宽按钮组用flex:1 1 0；注意flex-basis优先级高于width，auto与0行为不同，避免混用百分比basis与grow。
flex 值的合理分配，关键在于明确容器空间是否充足、各子项是否需要“争空间”或“让空间”。不是数值越大越好，而是要匹配实际布局意图：固定尺寸的不参与伸缩，内容主导的留足余地，填充区域的按需拉伸。
先看 flex 三个值怎么协同工作
flex 是 flex-grow、flex-shrink、flex-basis 的简写，顺序固定为 flex: grow shrink basis。浏览器按三步走：
- 第一步：用所有子项的 flex-basis（比如 200px、50% 或 auto）算出初始总宽度
- 第二步：对比容器宽度 —— 若总 basis 小于容器，则启动 flex-grow 分配剩余空间；若大于容器，则触发 flex-shrink 按比例压缩
- 第三步：压缩或拉伸时，只对 flex-shrink ≠ 0 或 flex-grow > 0 的项目生效，且严格按数值比例计算
常见场景下的推荐组合
不同需求对应不同写法，避免拍脑袋设 1 1 auto：
-
固定宽度栏（如侧边栏）：用
flex: 0 0 240px—— grow=0（不放大）、shrink=0（不缩小）、basis=240px（强制宽度） -
自适应中间区（如主内容）：用
flex: 1 1 0—— basis=0 让它完全从零开始分剩余空间，grow/shrink 都启用，既可撑开也能收缩 -
文字卡片类内容块：用
flex: 0 1 auto—— 不主动放大（grow=0），但允许收缩（shrink=1），basis=auto 尊重内容本来宽度 -
等宽平铺按钮组：全部设
flex: 1 1 0，basis=0 + grow=1 → 均分容器宽度，无视原始内容宽窄
容易踩坑的细节
这些点不注意，布局会突然“错位”或滚动条乱跑：
立即学习“前端免费学习笔记（深入）”；
-
flex-basis 优先级高于 width：写了
width: 100px又写flex-basis: 200px，最终按 200px 算 —— 不是叠加，是覆盖 -
shrink=0 不等于“绝对固定”：如果内容超长（比如一长串无空格英文），仍可能撑破容器；此时要配合
min-width: 0或overflow: hidden - auto 和 0 的区别很关键：basis=auto 会先按 width 或内容宽占位；basis=0 则直接归零，全靠 grow 分配 —— 这是实现“真弹性填充”的核心技巧
-
不要混用百分比 basis 和 flex-grow：比如
flex: 1 1 50%，当容器变窄时，50% 可能已超限，shrink 又被启用，结果难以预测
调试时快速判断逻辑是否成立
遇到布局异常，按这个顺序检查：
- 所有子项的 flex-basis 加起来是多少？和容器宽度比谁大谁小？
- 谁的 flex-grow > 0？它们的数值比例如何？有没有某一项设了 0 却误以为它该撑开？
- 谁的 flex-shrink = 0？它是否真的不该压缩？它的内容会不会溢出？
- 有没有遗漏
min-width: 0或overflow控制，导致文本/图片强行撑开？
