flex项宽度“算不准”是因box-sizing默认为content-box，width不包含padding/border；应设border-box或全局重置；gap比margin更适配flex间距；内容溢出时加min-width:0可解；align-items居中失效常因容器padding干扰。
为什么 flex 项宽度总“算不准”？box-sizing 是关键
很多人给 flex 项设了 width: 50%，再加 padding: 16px，结果发现它撑出了父容器——这不是 flex 的 bug，而是盒模型默认行为在作祟。默认 box-sizing: content-box 下，width 只算内容区，padding 和 border 额外加在外部，导致总宽远超预期。
- 全局重置最省心：
* { box-sizing: border-box; }，让所有元素的width包含padding和border - 只对 flex 项单独处理也行：
.item { box-sizing: border-box; width: 50%; padding: 16px; }，此时总宽严格等于 50% - 千万别混用：
width和flex-basis同时设非 auto 值，容易覆盖预期行为（比如flex-basis: 200px会优先生效，width被忽略）
margin 和 gap 到底该用哪个控制间距？
在 flex 容器里加项目间距，用 margin 看似直觉，但容易干扰伸缩逻辑；而 gap 是专为 flex（和 grid）设计的间隙属性，不参与 flex 计算，更干净。
-
gap: 12px直接生效，且支持row-gap/column-gap独立控制 - 用
margin时注意：首项margin-left、末项margin-right会多出空白，需额外清除（比如:first-child/:last-child重置） -
gap不兼容 IE，如需支持旧浏览器，才退而用margin+flex: 1组合模拟等分布局
内容溢出、文字撑开 flex 项？min-width: 0 很可能就是解药
当 flex 项里嵌套了长文本、图片或内联元素，默认 min-width: auto 会让它拒绝收缩，哪怕父容器空间不足，也会强行撑开甚至横向滚动。
- 给 flex 项加
min-width: 0，告诉浏览器：“允许我缩到 0”，配合flex: 1或flex-grow: 1才能真正响应剩余空间 - 常见场景：侧边栏 + 主内容区布局中，主内容区含长 URL 文本，不加此声明就会破坏两栏比例
- 注意：它不影响
padding，所以留白仍可保留；也不影响flex-basis的初始尺寸计算
align-items: center 不居中？检查 padding 和 height 是否冲突
交叉轴居中失效，常不是 flex 属性写错了，而是父容器的 padding 或子项的 height 干扰了对齐基准线。
立即学习“前端免费学习笔记（深入）”；
-
align-items: center是让子项的交叉轴中心与容器的交叉轴中心对齐；如果容器有padding-top: 40px，那它的“中心”就下移了 - 子项若设了固定
height且小于容器高度，align-items依然有效；但若子项height: auto且内容极少，可能视觉上“看起来没动” - 更稳的做法：用
align-self: center单独控制某个子项，或确保容器无意外padding，必要时用padding: 0显式重置
盒模型和 flex 不是两个独立系统，而是紧耦合的底层机制。真正卡住你的，往往不是 flex 属性本身，而是 box-sizing、min-width、padding 这些“配角”的默认值。调布局前先扫一眼这些，比反复改 justify-content 有效得多。
