CSS如何实现flex-item保持1:1比例缩放且flex-container左右内边距一致

该需求完全可以实现，使用CSS Grid布局比Flex布局更适配这类等比例响应式网格场景，修改后可同时满足自适应缩放、容器左右边距均匀、列表项1:1宽高比三个要求。

样式修改说明 #

你无需改动App.js代码，仅需要调整styles.css中的对应样式即可：

1. 先修正容器的盒模型，避免padding和border导致容器宽度溢出视口

.layout__container {
  width: 100%;
  padding: 3rem 2rem 2rem 2rem;
  text-align: left;
  border: 1px solid black;
  box-sizing: border-box; /* 新增：padding和border计入总宽度 */
}

2. 将列表的Flex布局替换为Grid布局，自动适配列数，间距均匀

.list {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 列宽最小100px，自动填充列数 */
  gap: 1rem; /* 统一设置行列间距，不需要单独给子项加margin */
}

3. 修改列表项样式，实现1:1等比自适应

.list .list__item {
  position: relative;
  aspect-ratio: 1/1; /* 新增：固定宽高比1:1 */
  background-color: white;
  border: 1px solid white;
  overflow: hidden;
  /* 移除原来的固定宽高、margin-right、flex属性 */
}

其他原有样式不需要调整，修改后窗口缩放时，会自动计算每行可容纳的卡片数量，卡片宽度自适应拉伸，每行剩余空间会均匀分配到列间隙中，容器左右内边距始终保持一致，卡片也会始终保持1:1的宽高比。

Flex兼容方案 #

如果必须使用Flex实现，可做如下调整：

.list {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
}
.list .list__item {
  flex: 1 0 calc(100%/6 - 1rem); /* 按最大列数6计算宽度，可根据需求调整基数 */
  min-width: 100px;
  aspect-ratio: 1/1;
  position: relative;
  background-color: white;
  border: 1px solid white;
  overflow: hidden;
}

该方案效果略逊于Grid布局，小概率会出现最后一行元素拉伸过度的问题，更推荐使用Grid方案。

如果需要兼容不支持aspect-ratio的低版本浏览器，可使用padding hack实现1:1比例：给.list__item添加padding-top: 100%;height: 0;，再将内部的.list__item__file设置为position: absolute;top:0;left:0;width:100%;height:100%;即可。

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