如何在各分辨率下实现元素等宽（最大138px），解决最后li宽度不均问题

首先得指出你代码里的两个核心问题：HTML结构错误和Flex布局属性设置不当，这才导致了最后一个li宽度异常和右侧留白的问题。

一、先修正最致命的HTML结构问题 #

你现在把*ngFor放在了<ul>标签上，这会导致每一条数据都生成一个独立的<ul>容器，每个容器里只有一个<li>——这完全不是你想要的“多个li在同一个flex容器里排列”的效果！

正确的写法应该是把循环放在<li>上，让所有li都在同一个<ul>容器内：

<ul class="flex-container">
  <li *ngFor="let item of data">{{item}}</li>
</ul>

二、调整布局，实现等宽+最大宽度限制 #

接下来解决li宽度不均和留白的问题。这里有两种方案，你可以根据需求选择：

方案1：纯Flex布局（无需媒体查询） #

调整CSS，用flex属性结合max-width，同时用gap替代margin来控制间距（更简洁，避免边距叠加问题）：

.flex-container {
  display: flex;
  background-color: #f1f1f1;
  flex-wrap: wrap;
  padding: 0; /* 移除ul默认的内边距 */
  gap: 20px; /* 替代margin:10px，控制li之间的间距 */
}

.flex-container > li {
  background-color: DodgerBlue;
  color: white;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  list-style: none; /* 移除li默认的圆点 */
  /* 核心设置：允许拉伸和收缩，基础宽度自动，最大限制138px */
  flex: 1 1 auto;
  min-width: 100px; /* 设置最小宽度，避免屏幕过窄时li太挤 */
  max-width: 138px;
}

这个方案会让li在容器宽度足够时，自动扩展到138px；当容器宽度不足时，所有li等比例收缩，保持一致宽度，不会出现最后一行单独拉伸的情况。

方案2：Grid布局（更简单，推荐） #

Grid布局天生适合这种等宽列的自适应场景，不需要复杂的flex属性计算，一行代码就能搞定自适应列：

.flex-container {
  display: grid;
  background-color: #f1f1f1;
  /* 自动填充列：每列最小100px，最大138px，超出部分平均分配（保证等宽） */
  grid-template-columns: repeat(auto-fill, minmax(min(138px, 100%), 1fr));
  gap: 20px; /* 控制li之间的间距 */
  padding: 0;
}

.flex-container > li {
  background-color: DodgerBlue;
  color: white;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  list-style: none;
}

这个方案完全不需要媒体查询，Grid会自动根据容器宽度调整列数，每列宽度始终相等，最大不超过138px，同时不会出现右侧留白的问题，非常省心。

为什么原来的代码会出问题？ #

1. 结构错误：循环放在ul上导致每个li都在单独的容器里，根本没有形成flex布局的排列效果；
2. flex属性冲突：你给li设置了flex-basis:138px，又在li上写了flex-grow:1，当最后一行有剩余空间时，flex-grow会让li拉伸填满，导致宽度变大；
3. margin的影响：给li设置margin:10px会让每个li的总占用宽度是138+20=158px，当容器宽度不能被158px整除时，就会出现右侧留白。

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