flex-basis设置的是弹性项目的初始尺寸而非最终宽度，其实际效果受flex-grow、flex-shrink及父容器尺寸共同约束；取值为auto、content、具体长度或百分比时行为各异，且易被flex简写覆盖。
flex-basis 设置的是初始尺寸，不是最终宽度
很多人以为 flex-basis 就是“设宽”，结果加了 flex-basis: 200px 却发现元素实际宽度不是 200px——这是因为 flex-basis 只是分配空间前的“起点”，后续还受 flex-grow 和 flex-shrink 影响。它不等于 width，也不锁死尺寸。
常见错误现象：
- 写了
flex-basis: 200px，但父容器太窄，子项被压缩到小于 200px（flex-shrink: 1默认启用） - 写了
flex-basis: 50%，但父容器没设宽，百分比计算失效（变成 auto） - 用
flex: 1后再单独设flex-basis，结果被简写覆盖（flex简写优先级更高）
flex-basis 的取值行为差异很大
flex-basis 的值直接影响“从哪开始伸缩”，不同取值在布局中效果截然不同：
-
auto（默认）：按元素自身width或内容宽度作为基准；若没设宽，就看内容撑开多大 -
content：完全依据内容尺寸，不预留额外空间（Chrome/Edge 支持好，Safari 16.4+ 才稳定） - 具体长度（如
200px、5em）：强制以该值为起点，不管内容多宽 - 百分比（如
30%）：相对于父容器主轴尺寸计算，但父容器必须有明确宽度（不能是width: auto）
例如：.sidebar { flex-basis: 250px; flex-grow: 0; flex-shrink: 0; } 才能真正固定侧边栏宽度；只写 flex-basis: 250px，它仍可能被压缩或拉伸。
立即学习“前端免费学习笔记（深入）”；
和 flex: 简写搭配时容易踩坑
flex 简写会一次性覆盖 flex-grow、flex-shrink 和 flex-basis，顺序不能错，且省略项有默认值：
-
flex: 1→ 等价于flex: 1 1 0（注意：flex-basis是0，不是auto） -
flex: 200px→ 等价于flex: 0 0 200px（不可伸缩，固定基准） -
flex: auto→ 等价于flex: 1 1 auto（先按内容占位，再分剩余空间） - 漏写
flex-basis时，flex: 1 1会使用默认auto，不是0
调试建议：在开发者工具里直接看 computed 样式中的 flex-basis 值，确认它是不是你预期的数字或关键字，而不是被简写隐式覆盖掉。
移动端和旧浏览器要注意兼容性
flex-basis 在 Safari 6.1–12.1 需要 -webkit-flex-basis 前缀，iOS 12.2+ 才原生支持；content 值在 Safari 16.4 之前基本不生效。实际项目中：
- 若需兼容 iOS 12 以下，避免用
flex-basis: content - 百分比
flex-basis在 Android WebView（尤其 4.4.x）中计算不稳定，建议改用固定值或flex: 0 0 50%替代width: 50% - 当父容器是
inline-flex且未设宽时，flex-basis: 100%会退化为auto，此时应显式设父容器width
真正起作用的从来不是单个属性，而是 flex-basis、flex-grow、flex-shrink 和父容器尺寸这四者的共同约束——任何一个环节松动，基准大小就不可靠。
