flex子项的百分比margin按包含块宽度计算而非父容器宽度，margin-top/bottom也按宽度算；gap替代margin更可靠；margin:auto仅在存在剩余空间时生效；需注意bfc、浮动、inline元素等干扰因素。
Flex子项的百分比margin不按父容器宽度算
百分比 margin 在 Flex 子项里根本不是相对于 Flex 容器宽度计算的，而是相对于它的包含块（containing block）宽度——这个包含块通常是最近的块级祖先，比如外层没设宽的 <div>，甚至可能是视口。如果父 Flex 容器是 <code>display: inline-flex、被 float 包裹，或自身是 position: absolute，包含块就更可能跳出去，导致 margin-left: 10% 算出来是 0px 或一个完全意外的值。
验证方法：用开发者工具选中子项 → Computed 面板 → 展开 margin-left，看“Computed value”右侧的 px 值，再反推它是基于哪个元素的宽度算的。
-
margin-top/margin-bottom的百分比也按包含块**宽度**算（不是高度），这点常被忽略 - 想实现“子项间留出容器宽度 5% 的间隙”，别写
margin-right: 5%，改用gap: calc(5% + 4px) - 把父容器从
inline-flex改成flex，包含块行为会更稳定
固定高度或 overflow:hidden 裁掉了 margin-bottom
Flex 容器设了 height、max-height 或 overflow: hidden，子元素的 margin-bottom 不是“失效”，而是被物理裁剪掉了——它确实存在，只是延伸区域超出了父容器边界，被截断了。
尤其在 <scroll-view></scroll-view>（uniapp）、卡片组件或滚动区域里，这是最隐蔽的“失效”原因。哪怕内容没溢出，只要 margin-bottom 的延伸部分碰到父容器底边，就会消失。
- 临时删掉
overflow: hidden或改成overflow: visible，看margin-bottom是否立刻出现 - 给父容器加
outline: 1px solid red，确认它实际渲染高度是否真卡死了 - 优先用
gap替代：.container { display: flex; flex-direction: column; gap: 12px; }，子项完全不用写margin-bottom - 最后一个子项的
margin-bottom多数时候是冗余的，会在容器底部空出一段无意义空白
margin:auto 在 Flex 里只对剩余空间起作用
margin: auto 在 Flex 中不是“自动居中”的万能钥匙，它只在主轴或交叉轴存在未被占据的剩余空间时才生效。如果子项已占满容器（比如写了 flex: 1 或 width: 100%），或者容器本身没设高度（align-items: center 就没参考尺寸），margin: auto 就彻底没地方撑。
- 单个子项要靠
margin: auto居中，必须满足：父容器是display: flex，该子项未设固定宽/高，且容器在对应方向留有空间 - 水平居中优先用
justify-content: center，垂直居中优先用align-items: center（需容器有明确高度） - 想让第一个子项右推其余项，用
margin-right: auto是可行的，但前提是它没被flex-grow拉伸
其他常见干扰：浮动、inline 类型、样式覆盖
这些不是 Flex 特有，但在 Flex 场景下更容易被误判为“Flex 导致失效”：
-
<span></span>、<a></a>这类默认display: inline的元素，margin-top/margin-bottom本来就不生效；加display: block或直接设display: flex才能用全方向margin - 子项设了
float或position: absolute，它就脱离文档流，margin仍计算，但不再影响兄弟元素布局 - 全局
div { margin: 5px }可能覆盖你写的.item { margin: 20px }；检查 Computed 面板里margin是否被标记为 “overridden” - 相邻块级子项的垂直
margin会发生合并（collapse），不是失效，是规范行为；用padding或gap绕过
overflow 值影响，整个子项的盒模型计算基准都会偏移——这时查 margin 值，得先确认父容器的渲染上下文是否干净。
