flex-basis 是 flex 项目在主轴方向的初始大小，仅对 flex 容器生效，可被 flex-grow/shrink 调整；而 width/height 是通用尺寸属性，在 flex 布局中不直接作为主轴基准，除非 flex-basis 为 auto 才回退使用。
flex-basis 是什么，和 width/height 有什么区别
flex-basis 定义的是 flex 项目在主轴方向上的「初始大小」，它只在 flex 容器中生效，且仅影响主轴（flex-direction 决定是横还是竖）。它不是最终尺寸，后续可能被 flex-grow 拉伸或 flex-shrink 压缩。
和 width 或 height 的关键区别在于：当项目设了 flex-basis: 200px，而容器又设置了 flex-grow: 1，那它很可能撑满剩余空间——此时 width: 200px 会被无视；反过来，如果只写 width: 200px 但没设 flex-basis，在 flex 布局中它的初始基准其实是 flex-basis: auto（即内容宽度），不是你写的 width。
flex-basis 的合法值有哪些，哪些最常用
合法值包括：auto、content、具体长度（如 200px、50%）、fit-content 等。实际开发中高频使用的是：
-
flex-basis: auto：默认值，等价于“先看width或height（取决于主轴），没有则按内容宽高” -
flex-basis: 0：常配合flex-grow: 1实现等分，避免内容宽度干扰分配（比如文字长短不一的卡片） -
flex-basis: 200px：明确指定初始主轴尺寸，适合固定宽/高的模块（如侧边栏） -
flex-basis: 33.333%：用于近似三等分，但注意百分比是相对于 flex 容器主轴尺寸计算的
为什么设了 flex-basis 还不生效？常见失效场景
最常见原因是没关掉「自动最小尺寸限制」：min-width 或 min-height 默认为 auto，在现代浏览器中会强制让 flex 项目至少显示内容所需空间，从而压过 flex-basis: 0 或小数值。
立即学习“前端免费学习笔记（深入）”；
解决方法是显式覆盖：
flex-item {
flex-basis: 0;
min-width: 0; /* 横向布局时 */
min-height: 0; /* 纵向布局时 */
}其他失效原因包括：
- 父容器没设
display: flex或display: inline-flex - 用了
flex: 1这类简写——它会把flex-basis设为0%（不是0），而0%在某些旧版 Safari 中表现异常 - 项目本身有
white-space: nowrap且内容超长，导致无法收缩
推荐写法：用 flex 简写还是单独设 flex-basis
日常建议优先用 flex 简写，但必须清楚它隐含的默认行为：
.item-1 { flex: 0 1 auto; } /* 不放大、可缩小、基准为内容宽 */
.item-2 { flex: 1; } /* 等价于 flex: 1 1 0%; 注意是 0%，不是 0 */
.item-3 { flex: 0 0 200px; } /* 不放大、不缩小、基准 200px */如果要精确控制且兼容老浏览器（如 iOS Safari flex: 1 足够，但记得搭配 min-width: 0 防止文字撑开。
真正容易被忽略的点是：百分比 flex-basis 在容器尺寸未定（比如父级 display: contents 或未设置 width）时会计算为 0，这时它就退化成 auto —— 调试时得往上看两层容器的尺寸是否确定。
