justify-content: flex-start在flex-wrap下仅控制每行内部左对齐，不消除末行右侧空白；真正解决需用::after伪元素补位（flex: 0 0 100% + display: block）或改用gap替代margin。
Flex 列表换行后错位，90% 是因为用了 margin 而不是 gap，或混淆了 align-items 与 align-content 的作用范围。
为什么 justify-content: flex-start 看起来没用
启用 flex-wrap: wrap 后，justify-content 只控制每行内部的主轴对齐，不解决末行右侧大片空白。它不会“拉走”空隙，只是让这一行从左开始排——所以卡片悬浮在中间、最后一行只显示 2 个却居中，都是正常行为。
- 别指望
justify-content: flex-start让末行视觉左对齐 - 加
::after伪元素才是最轻量的补位方案：content: ""+flex: 0 0 100%+display: block - 伪元素的
flex-basis必须和子项一致（比如子项是flex: 0 0 calc(25% - 12px)，伪元素也要写同样值）
align-content: center 为什么经常失效
align-content 控制的是“行与行之间”的交叉轴对齐，但它只在多行且容器有明确交叉轴剩余空间时才起作用。删掉 height 或 min-height，它就彻底没效果。
- 必须给容器设
height或min-height（例如min-height: 200px） -
align-content在单行下完全无效，别在调试阶段把它和align-items混用 - 如果子项用了
align-self: stretch或height: 100%，可能抢占交叉轴空间，导致align-content无处发力
gap 替代 margin 才是根治方案
用 margin 控制列表项间距，在换行时会暴露本质问题：浏览器按 DOM 顺序加边距，不管哪是行尾。结果就是末项多右距、下一行首项又带左距，视觉上左边空、右边挤。
立即学习“前端免费学习笔记（深入）”；
- 直接上
gap: 12px，它自动避开容器边缘，只作用于项与项之间 -
gap必须配合flex-wrap: wrap才能正确处理行间和列间间隙 - IE 不支持
gap，降级用margin时，必须预设列数并配:nth-child(4n)清除右距——但响应式断点切换列数时必然失效
子项高度不一致导致的“错位”其实是假问题
所谓“上下不对齐”，往往不是 Flex 的错，而是子项自身高度由内容撑开、内部对齐方式混乱（比如有的用 line-height 垂直居中，有的用 padding，有的用 flex 嵌套）。align-items: flex-start + 统一 min-height + 内容区域 display: flex; align-items: center; justify-content: center 更可控。
- 避免在子项里混用
vertical-align、line-height和 Flex 对齐 - 图片用
object-fit: cover，文字用min-width: 0; overflow-wrap: break-word防止撑宽 - 真正需要
align-content的场景极少，多数所谓“错位”只需稳住子项自身结构
最容易被忽略的点是：Flex 的“错位”从来不是属性没写全，而是你在用图文环绕逻辑（float）的思维调布局系统（flex/grid）。工具用错了，补丁越打越多。
