flex-basis的核心作用是为弹性项目设定主轴方向上的初始尺寸基准，作为伸缩起点；它优先级高于width/height，取值如200px、50%、auto或0，常与flex-grow/shrink配合通过flex简写统一控制。
flex-basis 的核心作用是：为弹性项目设定主轴方向上的初始尺寸基准，作为后续空间分配（伸缩）的起点。
它决定“伸缩前长什么样”
浏览器布局时，并不是直接按 flex-grow 或容器剩余空间来算大小，而是先看 flex-basis——这个值就是项目“本来想占多大”的声明。之后再根据 flex-grow（放大）、flex-shrink（缩小）和容器空间，决定最终尺寸。
- 设为 200px：不管内容多少，起始宽度就是 200px（横向布局下）
- 设为 50%：起始尺寸 = 父容器主轴长度的 50%，比如容器宽 800px，就先占 400px
- 设为 auto（默认）：退回到内容宽度或显式设置的 width/height 值
- 设为 0：完全放弃自身尺寸主张，把全部空间分配权交给 flex-grow
它比 width/height 更优先
只要元素在 flex 容器里，且设置了 flex-basis，它就会覆盖同方向的 width（横轴）或 height（纵轴）效果。例如：
-
.item { width: 100px; flex-basis: 200px; }→ 实际初始宽度是 200px -
.item { height: 100px; flex-basis: 150px; }→ 在flex-direction: column下，初始高度取 150px
它常和 flex-grow/shrink 搭配使用
单独写 flex-basis 较少，多数情况用 flex 简写统一控制：
立即学习“前端免费学习笔记（深入）”；
-
flex: 1;→ 等价于flex: 1 1 0;，基础为 0，全靠 grow 分配 -
flex: 0 0 250px;→ 不伸不缩，固定 250px（常见于侧边栏） -
flex: 1 1 300px;→ 初始 300px，有剩余空间可放大，空间不足可缩小
注意主轴方向的影响
flex-basis 的作用方向取决于 flex-direction：
-
row（默认）→ 控制宽度 -
column→ 控制高度 - 搭配
flex-wrap: wrap时，它还影响换行前单行能容纳多少内容
