如何让Flexbox内图片尺寸一致且适配可用宽度（90-200px）

要满足你的三个需求，关键是让每个图片项的基准宽度根据容器可用空间动态计算，同时限制最大/最小宽度，避免单个元素过度拉伸。修改后的代码如下：

.pp-avatar-area {
  width: 75%;
  max-width: 600px;
  border: 1px solid #000;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  --gap: 0.5rem;
  gap: var(--gap);
  padding: 0.5rem;
  overflow-y: auto;
}

.pp-image-avatar-item {
  /* 计算每个项的理想宽度：容器可用宽度减去3个间隙，除以4个项，同时限制在90-200px之间 */
  flex: 1 1 clamp(90px, calc((100% - var(--gap)*3)/4), 200px);
  aspect-ratio: 1 / 1;
  border: 1px solid red;
  border-radius: 0.25rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

<div class="pp-avatar-area">
  <div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
  <div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
  <div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
  <div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
</div>

问题根源与修正逻辑 #

原代码中flex-grow: 1会让剩余空间被所有元素平分，但当容器宽度刚好处于「能放下3个最大宽度元素（200px）+ 间隙」的临界值时，第4个元素会被分配到大量剩余空间，导致宽度远超其他元素。

修改后的flex: 1 1 clamp(...)做了三件事：

1. 用calc((100% - var(--gap)*3)/4)计算每个元素的理想宽度，确保4个元素加间隙刚好填满容器；
2. clamp()把宽度限制在90px（最小）到200px（最大）之间；
3. flex: 1 1允许元素在空间充足时拉伸、空间不足时收缩，保证所有元素尺寸始终一致。

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