justify-content: space-between 在单行时“撑开”卡片是设计行为而非 bug：首项贴左、末项贴右，单元素时即自身同时承担首末角色，故被强制横跨主轴。
为什么 justify-content: space-between 在单行时会“撑开”卡片？
它不是 bug，而是设计行为：space-between 要求首项贴左、末项贴右，中间所有间隙均分剩余空间。哪怕只有一张卡片，它也会被强制推到容器最右——因为“首项贴左、末项贴右”在单元素时等价于“该元素同时是首项和末项”，于是它必须横跨整个主轴。
用 justify-content: flex-start 最直接但需注意前提
这是最轻量的解法，但容易忽略两个关键点：
- 必须保留
flex-wrap: wrap（即使当前只有一行），否则某些浏览器在动态增删卡片时可能触发重排异常 - 卡片自身不能设
flex: 1或width: 100%，否则它们会主动抢占空间，让flex-start失效 - 如果父容器有固定宽度（如
max-width: 1200px），建议加margin: 0 auto居中外容器，再内部用flex-start控制卡片对齐，避免整块左飘
margin-right: auto 只对真实末项生效，别乱用 :last-child
这个技巧常被误用于“单行左对齐”，但它真正起作用的场景是：多行 + 最后一行左对齐。在单行时，给唯一卡片加 margin-right: auto 确实能把它拉到最左，但风险很高：
- 若后续 JS 动态插入一个空
<div class="spacer"></div>，:last-child就选错目标，样式失效 - 一旦父容器同时设了
justify-content: space-between，margin-right: auto直接被覆盖，毫无反应 - 它不解决“单行靠左、多行两端对齐”的混合需求——那得换 Grid 或用包裹层+条件类名控制
真正稳定的做法：放弃 space-between，用 gap + flex-start 组合
现代浏览器（Chrome 104+、Firefox 103+、Safari 16.4+）已全面支持 gap，它是比 space-between 更可控的间距方案：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px; - 卡片用
width: calc((100% - 32px) / 3)（三列为例），gap自动处理列间与行间间距 - 单行时自然左对齐；多行时每行都左起，视觉更一致，且不会出现“最后一行中间漏空”的经典 flex 坑
- 兼容性兜底只需加一句
row-gap: 16px; column-gap: 16px;，旧版浏览器也能降级为仅行间距
实际中最容易被忽略的是：卡片内文字没做截断控制，white-space: normal; overflow: hidden; text-overflow: ellipsis; 必须配合 display: -webkit-box 或 line-clamp，否则内容高度浮动，前面所有对齐都会偏移。
