flex-grow为0时子元素不参与剩余空间分配，宽度由内容或width决定；flex-shrink为1时小屏下会压缩导致换行或截断；flex-basis优先级高于width，影响初始主轴尺寸；gap兼容性影响均等布局。
flex-grow 为 0 时子元素不参与剩余空间分配
当多个子元素的 flex-grow 都设为 0，即使容器有剩余宽度，它们也不会拉伸，最终宽度只由自身内容或 width 决定，导致视觉上“不均”——其实是都卡在了最小尺寸。常见于按钮组、标签栏等场景，误以为“没生效”，其实是默认行为。
解决方法是显式设置至少一个子项的 flex-grow 值（如 1），其余保持 0；或者统一设为相同值（如全设 1）来均分剩余空间。
-
flex-grow: 0：完全不放大，宽度锁定在flex-basis或内容尺寸 -
flex-grow: 1：按比例瓜分剩余空间（多个同为1就均分） - 若混用不同值（如
1和2），则按权重比例分配，2的拿走两倍于1的剩余空间
flex-shrink 导致小屏幕下子元素被过度压缩
默认 flex-shrink: 1，意味着所有子项在容器宽度不足时都会缩小。但文字类元素（如 或短文本按钮）一旦被压缩，可能换行、溢出或文字被截断，看起来“宽度突变不均”。这不是布局错误，而是弹性收缩的副作用。
典型表现：PC 上整齐排列的导航项，在手机横屏变窄后，某一项突然塌缩成一行半，破坏对齐。
立即学习“前端免费学习笔记（深入）”；
- 对不能压缩的元素（如带图标的按钮、固定宽高组件），设
flex-shrink: 0 - 配合
min-width使用，比如min-width: 80px防止按钮压扁 - 慎用
flex-shrink: 0在纯文本容器里——它可能导致横向滚动或溢出
flex-basis 比 width 更优先影响初始主轴尺寸
很多人写 width: 200px 却发现子元素没按预期占宽，是因为 flex-basis（默认为 auto）会覆盖 width 在 flex 主轴上的表现。当 flex-basis 是 auto，它取的是 width 或内容宽度；但一旦显式设了 flex-basis: 100px，就以该值为准，width 被忽略（除非是交叉轴相关）。
这直接造成“明明设了 width 却不生效”的困惑，进而怀疑 flex 布局本身。
- 想严格按像素控制初始宽度 → 用
flex-basis: 200px，别依赖width - 想让子项按内容自适应再均分 → 保持
flex-basis: auto（默认），并配flex-grow: 1 - 避免同时写
width和flex-basis，除非你清楚交叉轴与主轴的分离逻辑
浏览器对 flex-gap 的兼容性影响宽度均等性
用 gap 实现子项间距很干净，但它会从容器的剩余空间中扣除——而旧版 Safari（gap，降级后常靠 margin 模拟，结果就是最后一行/列多出额外 margin，破坏等宽对齐。
例如三列布局加 gap: 12px，在支持的浏览器里总宽 = 3×子项宽 + 2×12px；在不支持的浏览器里若用 margin-right 模拟，末项也会有 margin-right，总宽多出 12px，触发换行或挤压。
- 检查目标环境是否支持
gap（Can I Use 数据可查） - 不支持时改用
padding+margin负边距组合，或用伪元素控制间隔 - 更稳妥的做法：用
flex-basis算好带间隙的宽度，比如三列均分 + gap 12px →flex-basis: calc((100% - 24px) / 3)
.container {
display: flex;
gap: 12px;
}
.item {
flex: 1 0 calc((100% - 24px) / 3); /* 兼容无 gap 场景 */
}
flex-grow/flex-shrink 的实际效果高度依赖 flex-basis 初始值和容器剩余空间计算，很多“不均”不是参数写错，而是没意识到它们之间存在隐式耦合。调试时先关掉 gap、清空 width、用 DevTools 查看 computed 的 flex-basis 和最终主轴尺寸，比反复调 grow 值更有效。