flex-wrap换行后最后一行靠左是设计行为而非bug，因justify-content仅对单行生效；grid中auto-fit会收缩空列，需改用auto-fill并隐藏空格；纯CSS难实现最后一行居中，推荐JS分组或inline-flex方案。
flex-wrap 换行后最后一行靠左，不是 bug 是设计行为
设置 display: flex + flex-wrap: wrap 后，最后一行子项靠左对齐，是因为 flex 容器对每一行独立计算主轴对齐——justify-content 不跨行生效。哪怕你写了 justify-content: center，它也只让当前行内的项目居中，而不会“感知”这是最后一行、也不拉齐整块内容。常见于卡片列表、图标栅格等场景，尤其在响应式断点下更明显。
- 用
space-between时，最后一行只有 2 个元素 → 产生 1 个大间隙，视觉上两端撑开、中间空洞 - 用
space-around时，首尾项会外溢（因为每项两侧都留半份间距），需额外加margin修剪 -
align-content: center是垂直方向控制，对水平对齐完全无效
用 grid-template-columns: repeat(auto-fit, ...) 替代 auto-fill 防止列塌陷
auto-fit 在内容不足时会把空列“收缩归零”，导致最后一行只剩几个项目、左对齐且右侧大片空白。这不是渲染错误，是规范定义的行为：浏览器认为没内容的列不该占位。
- 改用
auto-fill可强制保留所有可能列轨道，但要配合:empty隐藏无内容格子：.grid > *:empty { visibility: hidden; height: 0; } - 禁用
display: none—— 它会让格子彻底退出网格流，破坏列对齐 - 如果子项高度不一致，看起来“不对齐”，大概率是
align-items: stretch没生效，检查子项是否设置了min-height或height: auto
最后一行真正居中，得放弃单容器 grid/flex 思路
justify-content: center 对 grid 最后一行无效，因为它居中的是列轨道，不是项目本身；项目仍被钉死在第 1、2 列里。想让最后一行两个项目视觉居中，必须绕过这个限制。
- 最稳妥的做法：用 JavaScript 把数据按每行 N 个分组，每组渲染一个独立的
display: flex容器，每个容器设justify-content: center - 纯 CSS 替代方案：父容器
text-align: center，子项用display: inline-flex并清除换行空白（如父级font-size: 0，子项重设font-size） - 别用
transform: translateX()手动偏移最后一项——响应式下无法预判哪几个是“最后一行”，维护成本高
小屏多列错位本质是误用，不是样式能修好的
在手机竖屏上给 article 直接设 column-count: 3，结果文字挤成窄列、图片被截断、滚动异常，这不是 CSS 写错了，而是把印刷排版模型硬套到交互页面上。CSS 多列（columns）专为长文本分栏设计，不是响应式栅格工具。
立即学习“前端免费学习笔记（深入）”；
- 必须用媒体查询退化：小屏强制
column-count: 1+column-gap: 0，否则默认1em间隙会在单列时造成左侧缩进 - 所有可能跨列的块级元素（
img、blockquote、.card）都要加break-inside: avoid，旧版 Safari 补-webkit-column-break-inside: avoid - 永远不要在
body或全局容器上直接写column-count，它会污染所有后代，调试时极难定位
minmax(240px, 1fr) 配合 auto-fill 控制列数下限，比后期各种 hack 更可持续。 
