弹性盒子通过 flex-grow、flex-shrink 和 flex-basis 实现内容动态增减时的自动空间分配与收缩，无需手动调整尺寸；其中 flex-grow 控制剩余空间放大比例，flex-shrink 决定空间不足时的收缩程度，flex-basis 设定初始大小，三者配合可精准控制响应式布局行为。
当弹性盒子（Flexbox）中的内容动态增加时，只需合理设置 flex-grow 和 flex-shrink，容器就能自动分配剩余空间或收缩以适应变化，无需手动干预尺寸。
理解 flex-grow：内容增多时“抢”空间
flex-grow 控制子项在有剩余空间时的放大比例。值为 0 表示不放大，1 表示等比放大，2 表示是其他 flex-grow:1 项的两倍。
- 多个子项都设
flex-grow: 1→ 剩余空间均分 - 某项设
flex-grow: 2，其余为1→ 它占剩余空间的 2/4 = 50% - 文字内容追加、卡片动态插入后，只要父容器宽度固定或受约束，新增项会按 grow 规则参与布局
控制 flex-shrink：内容过多时“让”空间
flex-shrink 决定子项在空间不足时的收缩程度。默认值是 1，即允许压缩；设为 0 则强制不缩小（可能溢出）。
- 适合文本块、图标等不宜压缩的内容：设
flex-shrink: 0 - 适合可伸缩区域（如中间内容区）：保持
flex-shrink: 1或更高 - 注意：即使
flex-shrink: 1，浏览器也不会把元素缩到 0 宽，而是依据内容最小宽度（min-width: auto）做底线限制
搭配 flex-basis 实现更稳的响应行为
flex-basis 是分配空间前的“初始大小”，它和 width 不同，是 flex 布局的基准值。结合 flex-grow/flex-shrink 才能真正掌控动态表现。
- 写成简写：
flex: 1 1 auto→ grow=1, shrink=1, basis=auto - 希望某项优先占满但不挤压别人：
flex: 0 1 300px（不放大，可缩小，基础宽300px） - 希望固定宽度且完全不参与伸缩：
flex: 0 0 80px
常见陷阱与建议
动态增内容时容易忽略的细节：
- 父容器必须设
display: flex且有明确方向（flex-direction），否则子项的 flex 属性无效 - 避免对 flex 子项同时设
width和flex-grow，width 会被 flex-basis 覆盖或干扰计算 - 文字内容变多导致换行？加
white-space: nowrap或设min-width: 0防止 flex 项因内联内容撑大 - 用 JavaScript 动态添加元素后，无需重设样式——flex 布局天然响应 DOM 变化
