aspect-ratio: 1/1 加 flex-wrap 是正方形画廊最简解法，因现代浏览器已支持 aspect-ratio，配合 align-items: flex-start、min-width: 0 和精确 width 计算即可实现不拉伸、不塌缩、不溢出的自适应正方形布局。
为什么 aspect-ratio: 1/1 加 flex-wrap 是正方形画廊的最简解法
因为现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已全面支持 aspect-ratio，你不再需要伪元素 + padding-top: 100% 这类兼容性补丁。只要每个正方形项设为 aspect-ratio: 1/1，再配合 flex-wrap 和精确宽度计算，就能天然保持比例、自动换行、不挤压不变形。
关键不是“怎么让盒子变正方形”，而是“怎么让正方形在 Flex 容器里不被拉伸、不塌缩、不溢出”。这三点全靠三个 CSS 行为协同：
-
align-items: flex-start—— 关掉默认的stretch，否则正方形会被垂直撑满容器高度 -
min-width: 0在正方形项上 —— 防止 Flex 的flex-shrink把它压成一条线（尤其嵌套多层时） -
width: calc((100% - (N-1) * gap) / N)—— 真实预留间隙空间，而不是凭感觉减1vmin
flex-wrap 下正方形宽度怎么算才不溢出
假设你希望小屏最多 2 列、中屏 3 列、大屏 4 列，且统一用 gap: 1vmin，那么每项宽度不能写成 calc(25% - 1vmin) 这种近似值——它在窄屏下会因百分比基数变小而累积误差，导致最后一行右侧溢出。
更稳妥的写法是直接按列数均分总宽并扣除总 gap：
.grid-item {
width: calc((100% - 1vmin) / 2); /* 2列：1个间隙 */
}
<p>@media (min-width: 768px) {
.grid-item {
width: calc((100% - 2vmin) / 3); /<em> 3列：2个间隙 </em>/
}
}</p><p>@media (min-width: 1024px) {
.grid-item {
width: calc((100% - 3vmin) / 4); /<em> 4列：3个间隙 </em>/
}
}</p>
注意：gap 是容器级属性，但它的物理宽度会从总可用宽度中真实扣除；所以必须在 width 计算中显式减去，不能依赖 Flex 自动分配。
正方形内容（图片/文字）怎么填满又不失真
如果正方形里放的是 <img>，别用 width: 100%; height: 100% —— 这会强制拉伸变形。正确组合是：
-
width: 100%; height: 100%; object-fit: cover;—— 裁切填充，适合封面图 -
width: 100%; height: 100%; object-fit: contain;—— 等比缩放并留白，适合图标或带文字的卡片 - 如果是纯文字卡片，用
display: flex; flex-direction: column; justify-content: center; align-items: center;居中即可，无需object-fit
另外，object-fit 在 <picture></picture> 或 <svg></svg> 上可能不生效，此时需确保源文件本身是正方形，或改用 background-image + background-size: cover。
容易被忽略的兼容性断点与 fallback
Safari 15.3 及更早版本不支持 aspect-ratio，但它们支持 padding-top: 100% 的伪元素占位法。如果你项目还需兼容这些旧版 Safari，不要全局降级，而是用特性查询渐进增强：
.grid-item {
position: relative;
width: calc((100% - 3vmin) / 4);
}
<p>.grid-item::before {
content: "";
display: block;
padding-top: 100%; /<em> 兼容 fallback </em>/
}</p><p>.grid-item > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}</p><p>@supports (aspect-ratio: 1/1) {
.grid-item {
aspect-ratio: 1/1;
margin: 0;
}
.grid-item::before,
.grid-item > * {
position: static;
}
}</p>
真正麻烦的不是写 fallback，而是忘记在 @supports 块里重置掉伪元素和绝对定位——否则新旧规则叠加，会导致布局错乱。这个细节在 CodePen 上测试没问题，一上生产环境就出问题，就是因为没清掉旧样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
