flex-grow控制剩余空间按比例分配，需父容器设display: flex且存在未占满空间；值为无单位数字，如2、1、1表示将剩余空间分为4份并按比例分配；默认值0不放大，flex-grow: 1非“填满”而是参与等比分配。
flex-grow 控制剩余空间怎么分
它只在容器有空余宽度（或高度）时起作用，数值是无单位的比例系数。比如三个子项分别设 flex-grow: 2、flex-grow: 1、flex-grow: 1，那剩余空间会被切成 4 份，第一个拿 2 份，后两个各拿 1 份。
常见错误是以为 flex-grow: 1 就等于“填满”，其实它只是“按比例参与分配”。如果所有子项都设 flex-grow: 0（默认值），哪怕容器很宽，它们也不会变大。
-
flex-grow: 0：完全不参与扩展（最安全的默认行为） -
flex-grow: 1：和其他1值项等分剩余空间 - 设为
0以外的数时，必须考虑其他项的值才能预估实际尺寸
flex-shrink 决定谁先被压缩
当子项总基准宽度超过容器时，flex-shrink 控制它们“让出多少”。注意：它不是按比例减去固定像素，而是按“基准尺寸 × shrink 值”加权计算收缩量。
典型翻车现场：把 flex-shrink: 0 加在导航栏 logo 上防止变形，却忘了给右侧菜单项加 flex-shrink: 1，结果整个导航溢出容器，横向滚动条出现。
立即学习“前端免费学习笔记（深入）”；
- 默认值是
1，所有项都会收缩（但收缩量不同） -
flex-shrink: 0真正禁止收缩，但可能引发溢出 - 设为
0的项会“撑开”容器，除非父容器有overflow: hidden或子项自身有overflow处理
flex-basis 是布局前的“起点尺寸”
它不是最终宽度，而是 flex 分配逻辑开始前的初始占位大小。一旦设了具体值（如 200px 或 30%），就覆盖元素自身的 width；设为 auto（默认）则按内容或 width 计算。
最容易被忽略的是：flex-basis: 0 和 flex-basis: auto 行为完全不同。前者让元素“从零开始按 grow 分配”，后者保留内容宽度再分配剩余空间——这会导致同一组 flex-grow 在不同 flex-basis 下表现差异极大。
-
flex-basis: auto：尊重内容宽度，适合文字卡片类布局 -
flex-basis: 0：彻底交由flex-grow主导，适合等分容器场景（如flex: 1实际就是flex: 1 1 0） - 百分比值基于父容器尺寸计算，但若父容器宽高未明确（如
width: auto），可能退化为auto
三者合起来看 flex 简写怎么不踩坑
flex 简写不是简单拼接，它的三种形式对应不同默认行为：
- 单值如
flex: 1→flex: 1 1 0（注意flex-basis是0，不是auto） - 双值如
flex: 0 1→flex: 0 1 auto（flex-basis回归默认） - 三值如
flex: 0 0 200px→ 完全显式控制，最可控
线上问题里，80% 的 flex 布局异常都源于没意识到 flex: 1 隐含了 flex-basis: 0。比如你希望一个按钮在容器中“尽可能撑开但保留最小内容宽度”，用 flex: 1 反而会让它缩成一条线——这时该用 flex: 1 1 auto 或拆开写清楚。
