Flex子项aspect-ratio: 1/1失效主因是宽度不可测：未设width/flex-basis、align-items: stretch未关闭、或height/min-height干扰；需显式设宽、min-width: 0、禁用stretch。
flex子项写aspect-ratio: 1 / 1却不是正方形？先查这三处
不是属性不生效，而是浏览器压根没让它参与计算。Flex子项默认会受父容器align-items: stretch拉伸，同时若没设flex-basis或width，宽度就不可测——aspect-ratio失去“1份宽”这个基准，高度自然算不出来。
常见错误现象：.item { aspect-ratio: 1 / 1; }但子项高度为0、塌成细线、或被垂直拉满整行。
- 漏了
flex: 0 0 [宽度]或显式width（如width: calc((100% - 2vmin) / 3)） - 父容器没关
align-items: stretch，导致子项被强制撑高 - 子项上写了
height、min-height甚至height: auto，直接屏蔽比例逻辑
为什么flex: 1或flex-grow: 1会让aspect-ratio失效
flex-grow: 1会让子项尽可能占满剩余空间，宽度不再由内容或计算值决定，而是动态分配——此时aspect-ratio无法锚定一个稳定宽度来推导高度。
更隐蔽的问题是：flex: 1等价于flex: 1 1 0%，其中flex-basis: 0%会让浏览器认为“宽度从0开始拉伸”，aspect-ratio无基准可依。
- 正确做法：用
flex: 0 0 calc(33.333% - 1vmin)这类明确收缩值，而非flex: 1 - 若需响应列数，必须在媒体查询中同步更新
calc()里的gap扣除量（如3列减2vmin，4列减3vmin） - 别依赖
width: 25%这种近似值——百分比基数随容器变窄而缩小，但gap物理宽度固定，误差累积会导致最后一行溢出
子项内嵌flex容器时，min-width: 0不是可选项，是必加项
当.item内部又是一个display: flex容器（比如带图标+文字的卡片），且父级flex容器空间紧张时，子项可能被flex-shrink: 1（默认行为）压缩到宽度为0——此时aspect-ratio因宽度为0而彻底失效，高度也归零。
这不是bug，是Flex收缩逻辑的正常表现。但开发者往往只盯着aspect-ratio本身，忘了它依赖的宽度来源已被上游压缩掉。
- 必须在子项上加
min-width: 0，防止flex-shrink把它缩穿 - 若子项还用了
align-items: stretch，记得一并改成align-items: flex-start，否则内部flex容器仍会被拉高，破坏比例 - 检查computed styles里
width是否真为预期值；如果显示0px，八成是min-width: 0漏了
旧版Safari兼容时，aspect-ratio和padding-bottom不能混写在同一规则里
@supports检测在微信X5内核、部分iOS WebView中不可靠，它们会直接跳过整个@supports块。真正稳妥的降级是结构级双写，且顺序严格：
-
aspect-ratio: 1 / 1必须写在padding-bottom: 100%之前，同一选择器内；否则Safari 15.4+会忽略padding-bottom - 外层容器加
position: relative，子内容用position: absolute; inset: 0填满 - 若该子项本身是flex子项，还得额外加
min-width: 0，否则padding-bottom: 100%基于的宽度可能是0
真正卡住的点，往往不是aspect-ratio写错了，而是min-width: 0漏了、align-items没关、或者width计算里忘了减总gap——这三处任意一个出问题，正方形就立刻失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
