17370845950

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 时，它还影响换行前单行能容纳多少内容