flex-basis 是 flex 布局中指定项目在分配剩余空间前的初始主轴尺寸，优先级高于 width/height，参与 flex-grow/shrink 计算；设为 0 可实现真正等比均分，而 auto 则优先取 width/height 或内容宽高。
flex-basis 是什么，和 width/height 有什么区别
它不是“设置最终大小”，而是告诉 flex 容器：“这个项目在分配剩余空间前，先按这个尺寸占位”。flex-basis 参与的是 flex 的空间计算流程，而 width 或 height 是静态布局属性，不参与 flex 剩余空间再分配。
常见错误现象：flex-basis: 200px 写了，但元素实际宽度变成 300px 还是 150px —— 因为后续 flex-grow 或 flex-shrink 改变了它。
-
flex-basis: auto（默认）：优先使用元素的width/height，没设则按内容撑开 -
flex-basis: 0是高频用法：让所有项目从“零基础”开始按flex-grow比例分剩余空间，避免内容宽度干扰 - 设成具体值（如
flex-basis: 100px）时，若容器不够宽，flex-shrink会压缩它；设成flex-basis: 100%则按容器宽度算，但要注意父容器是否设置了width
flex-basis: 0 和 flex-basis: auto 在等比缩放时表现不同
做等比例布局（比如三列均分）时，flex-basis: 0 + flex-grow: 1 才真正“均分剩余空间”；用 flex-basis: auto 会导致每列先按内容宽度占位，再分剩余空间，结果不均等。
使用场景：卡片列表、按钮组、响应式栅格列。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
flex: 1（等价于flex: 1 1 auto），内容多的项会更宽 - 正确写法：
flex: 1 1 0或显式写flex-basis: 0 - 注意：IE11 对
flex-basis: 0支持不稳定，需加flex-basis: 0%兜底（但0%在某些版本有 bug，稳妥起见可配min-width: 0）
flex-basis 不生效？检查这些地方
最常被忽略的是父容器没设 display: flex，或子项被其他样式覆盖（比如写了 width 却忘了 flex-basis 优先级更高）。
常见错误现象：控制台里看到 flex-basis 被划掉，或者元素尺寸完全没变化。
- 确认父元素有
display: flex或display: inline-flex -
flex-basis和width同时存在时，flex-basis优先级更高（除非flex-basis: auto且width有效） - 主轴方向是 row 时看
flex-basis（影响宽度），是 column 时才影响高度；别在 row 布局里指望它控制高度 - Chrome DevTools 的 Layout 面板里，“Flex Basis”一栏显示的是计算后的值，不是你写的原始值 —— 如果看到是
auto，说明它被重置了（比如父容器未设width导致100%解析失败）
flex-basis 的单位和特殊值怎么选
它支持像素、百分比、content、auto、0，但不是所有都可靠。
性能 / 兼容性影响：百分比值依赖父容器尺寸，如果父容器宽度未定（比如 width: max-content），flex-basis: 50% 可能退化为 auto；content 值在 Safari 和旧版 Chrome 中支持有限。
-
flex-basis: 0最可控，推荐作为等分布局起点 -
flex-basis: 200px适合固定宽度 + 弹性伸缩组合（如侧边栏+主内容区） - 避免单独用
flex-basis: 100%，除非明确知道父容器宽度已确定；更安全的是flex-basis: 0+flex-grow: 1 -
flex-basis: content理论上按内容宽度，但实际行为接近auto，且兼容性差，生产环境慎用
复杂点在于：它和 flex-shrink 联动时，浏览器对“基础尺寸”的理解会影响压缩逻辑。容易被忽略的是，哪怕写了 flex-basis: 0，如果元素有 min-width，它仍可能成为压缩下限 —— 所以必要时得配合 min-width: 0。
