CSS如何实现flex项每行3个且窗口调整大小时保持1:1宽高比

实现方案 #

修改styles.css样式即可完成需求，核心逻辑是两点：1. 精确计算每个元素宽度保证每行刚好放下3个；2. 用CSS属性实现固定1:1宽高比。两种实现方案如下：

方案1：现代浏览器方案（推荐，写法简单）

直接用CSS原生aspect-ratio属性实现固定宽高比，兼容性覆盖Chrome 88+、Firefox 89+、Safari 15.4+等主流版本：

/* 全局统一盒模型，避免边框、内边距撑开元素宽度 */
* {
  box-sizing: border-box;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  display: flex;
  justify-content: flex-start;
  border: 1px solid orange;
  flex-wrap: wrap;
  padding: 1rem;
  /* 统一控制元素间距，避免margin的合并问题 */
  gap: 0.2rem;
}

.item {
  /* 每行3个元素，共2个间隙，单个元素宽度 = (总宽度 - 2个间隙宽度)/3 */
  flex-basis: calc((100% - 0.4rem) / 3);
  /* 禁止元素被拉伸或压缩 */
  flex-grow: 0;
  flex-shrink: 0;
  border: 1px solid grey;
  /* 直接设置宽高比为1:1 */
  aspect-ratio: 1/1;
  /* 可选：内容水平垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

方案2：旧浏览器兼容方案

如果需要适配不支持aspect-ratio的旧浏览器，可以用padding百分比技巧实现：

* {
  box-sizing: border-box;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  display: flex;
  justify-content: flex-start;
  border: 1px solid orange;
  flex-wrap: wrap;
  padding: 1rem;
  gap: 0.2rem;
}

.item {
  flex-basis: calc((100% - 0.4rem) / 3);
  flex-grow: 0;
  flex-shrink: 0;
  border: 1px solid grey;
  position: relative;
  height: 0;
  /* padding-top百分比基于元素自身宽度计算，100%即高度等于宽度，实现1:1 */
  padding-top: 100%;
}

/* 元素内的内容需要单独加定位，避免被padding挤到下方 */
.item * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者CCCC