flex-basis 是 Flex 项目在主轴方向上的初始尺寸，决定分配剩余空间前的基准值；当 flex-direction 为 row 时替代 width，为 column 时替代 height，且优先级高于 width/height（flex-basis 非 auto 时）。
flex-basis 是什么，它和 width/height 有什么区别
flex-basis 定义的是 Flex 项目在主轴方向上的“初始尺寸”，也就是分配剩余空间前的基准值。它不是最终尺寸，而是 flex layout 的计算起点。
- 当
flex-direction是row（默认），flex-basis替代width起作用；是column时则替代height - 如果同时设置了
flex-basis和width，且flex-basis不为auto，那么width会被忽略（仅在主轴方向） -
flex-basis: auto表示使用元素自身的width或height（取决于主轴），这是默认值
设置 flex-basis 的常见写法和实际效果
flex-basis 支持长度值、百分比、auto、content：
-
flex-basis: 200px：主轴上初始占 200px，后续可能被拉伸或压缩 -
flex-basis: 50%：按容器主轴长度的 50% 计算（注意：不是父容器宽度的 50%，而是 flex 容器主轴尺寸的 50%） -
flex-basis: auto：读取元素自身width/height，若无则按内容撑开 -
flex-basis: content：强制按内容宽度/高度计算（部分浏览器支持度有限，慎用）
示例：
.item {
flex-basis: 120px;
flex-grow: 1;
}
这个元素起始宽 120px，然后和同级其他 flex-grow: 1 元素均分剩余空间。
为什么设了 flex-basis 还没生效？几个典型原因
Flex 项目尺寸最终由 flex-basis、flex-grow、flex-shrink 共同决定，单独设 flex-basis 可能被覆盖：
立即学习“前端免费学习笔记（深入）”；
- 忘记清除默认
flex: 0 1 auto，导致flex-shrink: 1在空间不足时压缩元素（哪怕你写了flex-basis: 300px） - 父容器没设
display: flex，flex-basis完全无效 - 使用了简写
flex属性（如flex: 1），它会重置flex-basis为0%，覆盖你之前写的flex-basis: 200px - 元素有
min-width/min-height，且值大于flex-basis，此时最小限制优先
和 flex: 0 1 auto 中的 auto 到底对应什么
flex: 0 1 auto 是三个值的简写：flex-grow flex-shrink flex-basis。其中的 auto 指：
- 优先使用元素的
width或height（主轴方向） - 若未设置宽高，则按内容宽度/高度（
content）推导
这意味着：如果你希望某个项目严格按 flex-basis: 250px 起步，就别用 flex: 1 或 flex: auto 这类简写，而应显式写：
.item {
flex: 0 1 250px;
}flex-basis 的行为在不同浏览器中基本一致，但和 min-width、box-sizing、内边距叠加时容易出偏差，调试时建议用浏览器 devtools 直接看 computed 值里的 “base size” 字段。
