Flex项目最终宽度由flex-basis、flex-grow、flex-shrink与容器剩余空间共同决定：先取flex-basis（优先于width）为初始尺寸；有剩余空间时按flex-grow权重分配；超容时按flex-shrink×flex-basis比例收缩；间距应优先使用gap而非margin。
Flex 项目最终宽度不是靠 width 直接决定的，而是由 flex-basis、flex-grow、flex-shrink 和容器剩余空间共同算出来的。间距也别再用 margin 硬调，gap 才是标准解法。
flex 项目宽度怎么算？看这三步
计算逻辑分三阶段，顺序不能错：
- 先按
flex-basis（或width）取初始尺寸，flex-basis优先级高于width - 若容器有剩余空间（总
flex-basis和width小于容器主轴长度），按所有项目的flex-grow总和分配：每个项目新增宽度 = 剩余空间 ×flex-grow/ 所有flex-grow之和 - 若项目总初始尺寸超出容器，则触发收缩：每个项目收缩量 = 超出部分 ×
flex-shrink×flex-basis/ 所有（flex-shrink×flex-basis）之和
注意：flex-shrink 的计算依赖 flex-basis，不是单纯看数值比例；如果某项目设了 max-width，超出部分会被重新分配给其他没设限的项目。
gap 和 margin 做间距，差别在哪？
gap 是专为 Flex（和 Grid）设计的原生间距控制，margin 是通用外边距，混用容易翻车：
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px同时作用于行与列，且不会在容器边缘产生额外空白 -
gap: 12px 24px第一个值是行间隙（row-gap），第二个是列间隙（column-gap） - 用
margin模拟间距时，首尾项目会多出一半间距，得用:first-child/:last-child去抵消，维护成本高 -
gap不受flex-wrap影响，换行后依然生效；margin在换行场景下容易错位
为什么 flex 项目不按预期缩放？检查这几点
常见“设了 flex: 1 却不等宽”问题，往往卡在这几个地方：
-
min-width默认是auto，意味着内容最小宽度会阻止收缩——可显式设min-width: 0解锁压缩能力 - 父容器没设明确宽度（比如
width: 100%或固定值），导致 flex 计算失去基准 - 项目里有不可压缩的内容，比如长单词、图片、
white-space: nowrap文本，会撑开整个项目 - 用了
flex: 0 0 auto这类写法，flex-shrink: 0直接禁用了收缩，哪怕空间不足也不会缩小
真正难的不是公式本身，而是搞清哪一步被隐式规则截断了——比如 flex-basis: auto 实际取的是内容宽度，而内容宽度又受 box-sizing、内边距、字体大小影响。动手前先用浏览器开发者工具的 Layout 面板看一眼 computed flex-basis 和 min-width 值，比猜强得多。
