flex-basis 不生效主因是 flex-grow 非零导致空间重分配；应设 flex: 0 1 值 或 flex: 1 1 值明确控制，等宽布局直接用 flex: 1 更稳，单位依容器是否固定选 % 或 px，避免与 width 混用。
flex-basis 设置后列宽不生效？检查是否被 flex-grow 覆盖
很多人设了 flex-basis: 200px，结果列还是等宽或乱挤——大概率是没关掉 flex-grow。默认值是 flex: 0 1 auto，其中第二个值 flex-shrink 和第三个值 flex-basis 都在起作用，但更隐蔽的是：只要 flex-grow 是非零值（比如 flex: 1），容器剩余空间就会强行分配，直接吞掉你设的 flex-basis。
- 想严格按
flex-basis控制宽度，把flex-grow设为0：flex: 0 1 200px - 如果要“最小宽度 200px，但能撑开”，用
flex: 1 1 200px（注意顺序：grow shrink basis） -
flex-basis设auto时，实际取元素内容宽度或width值，容易误判成“没生效”
多列等宽布局别硬写 flex-basis，用 flex: 1 更稳
三列等宽、四列等宽这种场景，flex-basis 反而是干扰项。直接给每项写 flex: 1，让 Flex 自动均分剩余空间，既简洁又抗缩放。
- 容器设
display: flex，子项设flex: 1，不用管flex-basis - 如果列之间要间隙，用
gap（现代浏览器支持良好），别靠margin破坏 flex 计算 - IE11 不支持
gap，此时可用margin-right+:last-child清除，但得额外加 class 或 JS 判断
响应式多列中 flex-basis 单位选 % 还是 px？看容器是否固定宽
flex-basis 用百分比还是像素，本质是在问“基准是谁”。设 flex-basis: 30% 是相对于父容器宽度算的；设 flex-basis: 250px 就完全脱离容器尺寸，容易在小屏溢出。
- 父容器宽度可变（比如
max-width: 1200px+width: 100%），优先用%或em - 要固定列宽（如侧边栏 240px + 主内容自适应），就用
px，并确保flex-shrink: 0防止压缩 - 慎用
flex-basis: fit-content：Chrome 支持，Firefox 行为不一致，Safari 旧版不支持
flex-basis 和 width 同时设置，谁赢？
两者不冲突，但作用阶段不同：width 影响初始渲染尺寸，flex-basis 才是 Flex 布局真正用来计算分配空间的基准值。如果都写了，flex-basis 会覆盖 width（除非 flex-basis 是 auto）。
立即学习“前端免费学习笔记（深入）”；
- 调试时发现宽度不对，先查 computed 样式里
flex-basis实际解析值，不是看声明块 - 用
flex-basis: auto且没设width，元素会按内容宽度伸缩，常被误认为“没控制住” - 不要在同一个规则里既写
width: 200px又写flex-basis: 30%，语义混乱，后期难维护
flex-basis 的坑不在语法，而在它和 grow/shrink 的联动关系——多数问题其实出在没意识到自己正在让 Flex “重新协商”空间分配。盯着那三个数（grow shrink basis）看两眼，比反复调 width 有用得多。
