使用 box-sizing: border-box 配合明确的 flex-basis 值可确保 Flex 布局按预期工作；核心是让 padding 和 border 纳入宽高计算，使 flex-basis 数值真实反映初始占用空间，并推荐全局设置 * { box-sizing: border-box; }。
直接用 box-sizing: border-box 配合明确的 flex-basis 值，就能让伸缩布局按预期工作。核心是控制“尺寸归属”——把 padding 和 border 算进宽高里，再让 flex-basis 有清晰的参照基准。
统一使用 border-box 是前提
默认 content-box 下，width: 200px; padding: 12px; border: 1px 的元素实际占宽 226px，而 flex-basis 却只按 200px 计算，导致伸缩错位或换行。切换为 border-box 后，这 200px 就真包含内容、内边距和边框，flex-basis 的数值才真正反映“初始占用空间”。
- 推荐全局设置：
* { box-sizing: border-box; }，避免遗漏 - 若项目已上线，可局部加在 Flex 项目上，比如
.item { box-sizing: border-box; flex-basis: 200px; } - 注意：border-box 不影响 margin，外边距仍额外占据空间
flex-basis 要配合具体数值而非 auto
当设 flex-basis: auto（默认值），浏览器会先看 width/min-width，再计算内容撑开后的尺寸，容易受 padding、字体、换行等干扰，导致各项目基线不一致。显式写死更可控。
- 固定尺寸场景：用
flex-basis: 240px或flex-basis: 30%，搭配box-sizing: border-box，宽度稳定 - 响应式场景：结合
min-width与flex-basis，如flex: 1 1 280px;，既保最小宽度，又允伸缩 - 避免混用
width和flex-basis，二者冲突时以 flex-basis 为准（除非是 auto）
gap 替代 margin 控制间距
Flex 项目间的 margin 不会合并，且会参与主轴空间计算，可能挤压 flex-basis 的可用区域。gap 是容器级属性，不增加子项自身尺寸，也不干扰 flex 计算逻辑。
立即学习“前端免费学习笔记（深入）”；
- 用
gap: 12px代替margin-right或margin-bottom - gap 对单行/多行 Flex 容器都有效，且自动适配 flex-wrap
- IE 不支持 gap，如需兼容可降级为 margin + box-sizing 保障基础尺寸
交叉轴对齐留意 padding 和 height 干扰
即使 align-items: center，若某项目上下 padding 很大，视觉中心会偏移。因为对齐参考点是整个项目的盒边界（含 padding），不是内容区。
- 统一各项目的 padding-top/padding-bottom，或改用内部嵌套一层 div 来承载 padding
- 需要严格垂直居中内容时，可在项目内设
display: flex; align-items: center; justify-content: center; - 多行 Flex 容器优先用
align-content: center控制行整体分布，比依赖单个项目 align-self 更稳
基本上就这些。box-sizing 解决尺寸归属，flex-basis 明确起点，gap 管理间隙，三者配合，伸缩行为就变得可预测、易调试。
