最后一张卡片掉到下一行通常不是宽度不足，而是flex-basis计算未扣准gap或父容器padding；应检查computed width、避免margin与gap叠加，并用flex:1加min-width控制列数，或改用grid auto-fit配合minmax确保响应式换行。
最后一张卡片掉到下一行？先看是不是 flex-basis 算错了
这不是“卡片太宽”，而是 flex-basis 值没扣准 gap 或父容器 padding。比如写 flex: 0 0 calc(33.333% - 1rem)，但父容器有 padding: 1rem，实际可用宽度少了 2rem，三张卡就塞不下，最后一张被挤下去。
- 用开发者工具检查
.card的 computed width，确认是否真等于你算出的值 - gap 是独立属性，
calc()里减的只是单边 gap，而gap: 1rem实际在每两张卡之间加了 1rem，n 张卡有 n−1 个 gap —— 但 flex 容器不自动帮你摊这个账 - 更稳的做法是放弃
calc()，改用flex: 1; min-width: 280px;，让浏览器自己分列，gap 由容器统一控制
用了 grid 却还是掉行？auto-fit 和 auto-fill 别混用
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在小屏下容易把卡片硬塞进“看不见的列”，导致溢出或错位；而 auto-fit 会收缩空轨道，才是响应式栅格的正确开关。
- 只用
auto-fit：卡片少时自动拉宽，不会留白；卡片多时自然换行 - 别给父容器加
width: 100%同时又用1fr，窄屏下 Grid 可能算出负值或异常缩放 - 验证
minmax(280px, 1fr)中的 280px 是否合理：iPhone SE 宽度 375px，减去左右 gap 和 padding 后，单列净宽低于 240px 就大概率撑破
卡片高度不一致，最后一行对不齐？justify-content 不是万能药
justify-content: space-between 在多行 flex 或 grid 中只作用于当前行。最后一行只剩一张卡，它就被拉到最左+最右，中间大片空白——这不是 bug，是设计如此。
- flex 布局中，统一设
align-items: flex-start，避免卡片因内容高度不同被拉伸错位 - grid 布局中，加
align-items: start或给卡片设align-self: start - 如果必须居中对齐，用
justify-content: center+flex-wrap: wrap，但得接受最后一行居中、不贴边
图片或文字撑爆卡片？内部结构失控比布局更致命
Grid 或 Flex 控制列数和换行，但不管卡片内部怎么长。一张图没约束、一段长文本没截断，整张卡就变高，把整行顶歪，最后一张自然“掉”下去。
- 图片必须包在
overflow: hidden容器里，且img标签设width: 100%; height: auto; object-fit: cover; - 文字区域（如
.card-body）加flex-grow: 1吸收剩余空间，底部按钮用margin-top: auto贴底 - 别一边写
gap: 1.5rem，一边又给.card加margin: 1rem——间距翻倍、小屏直接溢出
最后一张卡掉下去，往往不是宽度算错，而是卡片内部没锚定基线、图片没裁剪、文字没约束，或者干脆用了 auto-fill 还以为它会自适应。真正要盯住的，是 computed width、gap 与 margin 的叠加效应、以及卡片自身的高度稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
