应使用aspect-ratio: 1 / 1并确保子项flex-shrink: 0、有明确宽度来源（如width: 100%）、无任何height相关声明，且display为flex/block/grid；内容需配合object-fit、overflow等防止撑高变形。
flex子项如何用aspect-ratio保持1:1宽高比
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持 aspect-ratio，这是实现 1:1 宽高比最直接的方式。它不依赖父容器高度，也不需要伪元素或 padding-top 技巧，且与 flex 布局天然兼容。
关键点：只要子项是 flex 项目，且父容器有明确宽度（比如 flex: 1 或固定宽），aspect-ratio: 1 / 1 就会让它自动维持正方形尺寸，随宽度缩放。
- 必须写成
aspect-ratio: 1 / 1（斜杠分隔），不能写1:1或1 - 若子项内容会撑高（如长文本），需加
overflow: hidden或min-height: 0防止比例被破坏 - 旧版 Safari（
不支持aspect-ratio时用padding-top模拟1:1
当需要兼容 Safari 15.3 或更老版本时，仍得用经典“padding-top 百分比”技巧。但注意：它要求子项脱离文档流（position: relative + position: absolute），而 flex 子项默认是文档流内元素——所以必须包裹一层。
典型结构：
.item {
flex: 1;
position: relative;
}
.item::before {
content: "";
display: block;
padding-top: 100%; /* 触发1:1占位 */
}
.item > .content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
- 不能直接在 flex 子项上设
padding-top: 100%，否则会叠加在内容之外，导致整体高度翻倍 - 伪元素
::before的padding-top是相对于父宽计算的，因此能稳定生成正方形占位 - 内部
.content用绝对定位填满，确保内容可交互、可滚动
flex布局中1:1子项内容溢出或变形怎么办
即使宽高比正确，图片、文字或子容器仍可能破坏视觉正方形：图片拉伸、文字换行挤压、子 flex 容器高度塌陷等。
- 图片务必加
img { width: 100%; height: 100%; object-fit: cover; }，避免变形或留白 - 若子项含文字，用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止换行撑高 - 子项内部再嵌 flex 布局（如图标+文字垂直居中）时，必须设
height: 100%且父项min-height: 0，否则 flex: 1 在嵌套中失效 - Safari 对
aspect-ratio+flex-shrink: 0组合有渲染 bug，建议避免同时使用
响应式场景下1:1子项如何随屏幕缩放又不模糊
纯 CSS 的 aspect-ratio 和 padding-top 方案只控制容器尺寸，不解决图像清晰度问题。尤其在高 DPI 屏幕或放大视口时，小图会被拉伸模糊。
- 用
srcset和sizes提供多分辨率图片：<img src="s.jpg" srcset="m.jpg 2x, l.jpg 3x"> - 若用背景图，配合
background-size: cover和image-set()（Chrome/Firefox 支持，Safari 尚未） - 避免对 1:1 容器设
max-width后再用width: 100%，这会导致计算链过长，某些安卓 WebView 会丢帧或错判尺寸
真正难的不是让盒子变正方，而是让它在各种嵌套层级、不同内容类型、跨浏览器和响应式缩放下始终稳定。多数失败案例都卡在「忘了重置 min-height」或「在 aspect-ratio 上叠加了 height」——这两个值一旦冲突，浏览器会优先按 height 渲染，直接废掉比例逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
