flex-basis设置的是弹性项在主轴方向上的初始尺寸，非最终宽高，而是空间分配起点；主轴为row时控制宽度，column时控制高度，优先级高于width/height，取值包括px、%、auto、content等。
flex-basis 设置的是弹性项在主轴方向上的初始尺寸，不是最终宽度或高度，而是浏览器分配空间前的“起点值”。它受主轴方向影响：主轴为水平（flex-direction: row）时控制宽度，为垂直（flex-direction: column）时控制高度。
常用取值及对应效果
flex-basis 接受多种类型值，不同写法行为差异明显：
-
具体长度值：如
flex-basis: 200px、flex-basis: 3em，直接指定初始主轴尺寸； -
百分比：如
flex-basis: 50%，按父容器主轴尺寸计算（注意：若父容器主轴尺寸未定义，比如没设width或height，则 50% 实际为 0）； -
auto（默认）：优先取元素自身的
width（主轴水平时）或height（主轴垂直时），若未设置，则回退到内容自然尺寸； - content：完全依据内容撑开的尺寸，不依赖 width/height；
-
关键字：如
max-content、min-content、fit-content，适用于响应式场景，但兼容性需留意。
和 width / height 的关系
在 flex 布局中，flex-basis 优先级高于 width（主轴水平时）或 height（主轴垂直时）。两者同时存在且冲突，flex-basis 生效，width 仅在非 flex 场景或交叉轴上起作用。
- 例如：
width: 150px; flex-basis: 100px;→ 主轴初始尺寸为 100px； - 若主轴是垂直方向（
flex-direction: column），则height与flex-basis同理，后者胜出； - 不建议混用 flex-basis 和 width/height 控制同一方向，除非你明确需要 fallback 行为。
等分布局最稳的写法
要让多个项目均分容器剩余空间，推荐组合：flex-basis: 0 + flex-grow: 1。这样可彻底忽略内容尺寸干扰，实现严格比例分配。
- 比如三列均分：
.item { flex: 1; }等价于flex: 1 1 0，即flex-grow: 1; flex-shrink: 1; flex-basis: 0； - 对比
flex-basis: auto：内容长的项会先占更多空间，再按 grow 分配，结果不均等； -
flex-basis: 0%效果同0，但语义稍弱，推荐用无单位数值更清晰。
容易踩的坑
实际开发中几个高频问题：
- 设了
flex-basis: 100%却没占满——检查父容器是否设置了明确的主轴尺寸（如width）； - 设了
flex-basis: 0但内容仍把盒子撑开——这是正常现象，flex-basis 只管初始分配，不抑制内容溢出，必要时配合overflow或min-width: 0； - 用预处理器变量同时赋值给
width和flex-basis，一旦变量解析失败，只剩一个生效，布局突变不易排查。
