直接用 aspect-ratio: 1 / 1 + flex-wrap 可实现自适应正方形网格，但需满足宽度可计算、禁用 align-items: stretch、子项设 min-width: 0，并在 width 计算中显式扣除 gap 总和，否则比例失效。
直接用 aspect-ratio: 1 / 1 + flex-wrap 就能实现，前提是别让 Flex 把它拉伸或压扁——这比 padding-top hack 简洁得多，但容易在子项上漏掉关键约束。
为什么 aspect-ratio: 1 / 1 单独写没用？
因为 aspect-ratio 只在元素有明确宽度来源时才生效。Flex 子项若没设 flex-basis 或 width，它会按内容撑开，比例就失效了。
- 常见错误现象：
.item { aspect-ratio: 1 / 1; }但网格项宽高完全不等，甚至塌成一条线 - 必须配合
flex: 0 0 [宽度值]或显式width，例如flex: 0 0 calc(33.333% - 1vmin) - 如果用了
flex: 1或flex-grow: 1，宽度会被拉满，aspect-ratio失去参考基准
flex-wrap: wrap 下宽度怎么算才不溢出？
别用 width: calc(25% - 1vmin) 这类近似值——百分比基数随容器变窄而缩小，gap 的物理宽度却固定，误差累积会导致最后一行右侧溢出。
- 正确写法是：总宽减去所有 gap，再均分。例如 3 列配
gap: 1vmin→width: calc((100% - 2vmin) / 3) -
gap是容器级属性，但它真实占用空间，必须显式从width中扣除 - 列数变化时，媒体查询里要同步更新 gap 数量：2 列 → 减
1vmin，3 列 → 减2vmin，4 列 → 减3vmin
为什么正方形会被垂直拉伸或压成细线？
Flex 默认 align-items: stretch，会强行把子项高度拉满容器；同时默认 flex-shrink: 1，在空间不足时又可能把它压扁。
- 加
align-items: flex-start关闭垂直拉伸 - 在子项上加
min-width: 0防止flex-shrink把它缩到 0（尤其嵌套 flex 容器时必加） - 避免同时设
height和aspect-ratio，后者会被忽略
真正卡住的点往往不是 aspect-ratio 写错了，而是 min-width: 0 漏了、align-items 没关、或者 width 计算里忘了减总 gap —— 这三处任意一个出问题，正方形就立刻失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
