子项保持正方形需用 aspect-ratio: 1 / 1 配合 flex 和 max-width，避免固定宽高破坏响应式与 flex-wrap 换行逻辑；老浏览器可用 padding-top 百分比 hack 回退。
flex-wrap 容器里子项如何保持正方形？关键在宽高同步控制
不能只设 width 和 height 固定值——那会破坏响应式。真正可行的方式是让子项的宽高始终相等，且能随容器宽度动态缩放。核心思路是：用 aspect-ratio: 1 / 1 声明比例，再配合 flex-basis 或 width 控制基准尺寸，最后靠 flex-shrink 允许压缩。
为什么直接写 width: 200px; height: 200px 不行？
这种写法会让子项在小屏下死扛固定尺寸，导致单列堆叠、大量空白或横向溢出。更糟的是，它和 flex-wrap: wrap 的协作逻辑冲突：flex-wrap 需要子项“可收缩”才能触发换行，而刚性宽高会阻止浏览器计算合理换行点。
-
width和height同时设为固定值 → 子项失去弹性，flex-shrink: 1也难生效 - 不设
height，仅靠aspect-ratio→ 浏览器自动推导高度，且支持缩放 - 必须配
flex: 1 1 min(200px, 100%)或类似逻辑 → 让子项在窄屏下能缩小，又不至于塌成一条线
推荐写法：aspect-ratio + flex + max-width
这是目前最稳定、兼容性好（Chrome 88+、Firefox 89+、Safari 15.4+）、语义清晰的组合：
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
<p>.item {
flex: 1 1 calc(33.333% - 8px); /<em> 每行最多3个，预留 gap 空间 </em>/
max-width: 300px; /<em> 防止宽屏下单个过大 </em>/
aspect-ratio: 1 / 1; /<em> 强制正方形 </em>/
background: #eee;
}
</p>
注意：calc(33.333% - 8px) 中的 8px 是 gap: 12px 在每行中分摊到两个间隙的均值（12px ÷ 2 × 2 个间隙 = 12px，但因两端无外边距，实际每项需减约 8px），具体数值要根据 gap 实测微调；max-width 是防止大屏下单项过宽失衡的关键约束。
IE 或老 Safari 下 fallback 怎么做？
这些浏览器不支持 aspect-ratio，得用 padding-top 百分比 hack，但必须配合相对定位和绝对定位子容器：
.item::before {
content: "";
display: block;
padding-top: 100%; /* 触发正方形高度 */
}
<p>.item > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</p>
这个方案有效，但结构侵入性强、维护成本高。除非项目明确要求支持 Safari ≤15.3 或 IE11，否则不建议引入——现代项目应优先用 aspect-ratio 并接受其兼容边界。
最容易被忽略的一点：当子项内容有文字或图片时，aspect-ratio 只管容器比例，不管内部是否溢出。所以记得加 overflow: hidden 或用 object-fit: cover 控制图片，否则正方形会被撑变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
