flex-basis是弹性项目在伸缩前的初始尺寸主张，优先级高于width/height；设为200px即初始宽/高为200px，50%则占父容器主轴一半，auto按内容或width/height，0则放弃初始空间由flex-grow分配。
flex-basis 就是“伸缩前它想占多大”
它不是最终宽度或高度，而是浏览器在执行 flex-grow 或 flex-shrink 之前，给这个元素定下的“初始主张尺寸”。你可以把它理解成：这个元素在被拉伸或压缩前，自己报出的“基准身长”。
- 设为
200px→ 它说：“我起步就要 200px 宽（横轴）或高（纵轴）” - 设为
50%→ 它说：“我要占父容器主轴长度的一半” - 设为
auto（默认）→ 它说：“按我内容宽/高，或者按我写的width/height来定” - 设为
0→ 它说：“我不争初始空间，全听flex-grow分配”
为什么 flex-basis 会覆盖 width/height？
因为它是 Flexbox 布局中更“权威”的初始尺寸声明。只要元素是弹性项目，flex-basis 就会在布局计算早期介入，并直接覆盖同方向的 width（横轴）或 height（纵轴）。
-
.item { width: 100px; flex-basis: 200px; }→ 实际初始宽度是200px -
.item { height: 80px; flex-direction: column; flex-basis: 120px; }→ 初始高度是120px - 只写
width: 200px但没设flex-basis？那浏览器默认按flex-basis: auto处理，可能退回到内容宽度，而不是你写的200px
常见踩坑点：0、auto、content 的区别
这三个值看着像，行为却完全不同，尤其在内容溢出或空间紧张时表现差异极大：
-
flex-basis: 0：放弃所有尺寸主张，把空间分配权完全交给flex-grow；适合等分布局（如flex: 1等价于flex: 1 1 0） -
flex-basis: auto：尊重width/height或内容自然尺寸；但若内容很长，它可能撑开容器，导致换行或溢出 -
flex-basis: content（实验性，兼容性差）：强制按内容最小固有尺寸（intrinsic size）计算，不推荐生产环境用 - ⚠️ 注意：
flex-basis: 0%和0效果不同：前者仍会触发百分比解析逻辑（需父容器有明确主轴尺寸），后者是绝对零值，更稳定
怎么用 flex 简写避免混乱？
单独写 flex-basis 很少，绝大多数情况都走 flex 简写——它顺序固定：flex: <grow> <shrink> <basis>，漏掉某项会取默认值。
立即学习“前端免费学习笔记（深入）”；
.sidebar { flex: 0 0 250px; } /* 不伸不缩，固定 250px */
.main { flex: 1; } /* 等价于 flex: 1 1 0; —— 初始为 0，全靠 grow 分配 */
.card { flex: 0 1 300px; } /* 可缩小，初始 300px，不放大 */- 写
flex: 200px是合法的，等价于flex: 0 0 200px，不是语法错误 - 写
flex: 1 200px是非法的——必须按grow shrink basis顺序，否则整个声明会被忽略 - 当
flex-basis设得很小（如0），但内容很长时，flex-shrink: 1可能无法真正缩小它，因为受min-width: auto限制；此时要显式加min-width: 0才能生效
flex-basis 的真实复杂性不在定义，而在于它和 flex-shrink、min-width、内容换行、父容器尺寸之间的隐式博弈——很多“布局没按预期收缩”的问题，根源其实是 flex-basis 被设成了 auto，而你误以为它尊重了 width。
