flex项width“算不准”因box-sizing默认content-box，width不包含padding/border；应设border-box或避免混用width与flex-basis；gap优于margin控制间距；min-width:0允许项目收缩；align-items失效常因父容器padding或子项尺寸干扰。
flex项的width为什么总“算不准”？
这是最常被误认为Flex bug的问题。根本原因不是Flex错了，而是box-sizing默认为content-box，而width只管内容区，padding和border额外往外加。比如设了width: 50% + padding: 16px，实际宽度远超50%。
- 全局重置最省事：
* { box-sizing: border-box; }，让所有元素的width包含padding和border - 单独处理也行：
.item { box-sizing: border-box; width: 50%; padding: 16px; } - 别混用
width和flex-basis非auto值——flex-basis: 200px会优先生效，width被忽略
margin和gap哪个更适合控制flex项目间距？
gap是专为flex（和grid）设计的，不参与flex计算逻辑；margin则会挤占主轴空间、干扰伸缩行为。
-
gap: 12px直接生效，支持row-gap/column-gap独立控制 - 用
margin时，首项margin-left、末项margin-right会多出空白，得靠:first-child/:last-child清除 -
gap不兼容IE，如需支持旧浏览器，才退而用margin+flex: 1模拟
内容撑开flex项、换行失控，min-width在哪起作用？
flex项目默认min-width: auto，意味着它拒绝收缩到比内容更小——哪怕父容器窄得只剩1px，一段长URL或图片也能把它撑爆。
- 给项目加
min-width: 0，告诉浏览器：“允许我缩到0”，配合flex-grow: 1才能真正响应剩余空间 - 这不影响padding，留白照常保留；也不影响
flex-basis初始尺寸计算 - 若仍溢出，再补
word-break: break-all或overflow: hidden
align-items: center不居中？别只盯flex属性
对齐失效往往不是align-items写错了，而是盒模型在背后干扰：父容器的padding移动了它的交叉轴中心线，或者子项height固定但小于容器高度，导致视觉错位。
-
align-items: center是对齐“容器交叉轴中心”与“项目交叉轴中心”，不是对齐内容 - 容器有
padding-top: 40px，它的中心就下移了，项目自然跟着偏 - 子项若
height: auto且内容极少，可能看起来“没动”，其实是对齐了——只是基准线太靠上
复杂点在于，这些干扰常常叠加出现：一个项目同时有padding、min-width: auto、flex-shrink: 1，再加上容器padding，最终表现就很难凭直觉判断。调试时得一层层关掉样式，而不是只盯着flex相关属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
