移动端列表项高度统一：如何让所有项匹配最高项高度？

要让所有列表容器匹配最高项的高度，可以通过CSS Flexbox 或 Grid 轻松实现，以下是两种具体方案：

方案一：使用 Flexbox 修改列表容器 #

给父容器（.list）设置垂直方向的 Flex 布局，并让每个列表项（.benefit_container）占满可用垂直空间：

.list {
  padding-left: 0;
  width: 100%;
  display: flex;
  flex-direction: column; /* 垂直排列列表项 */
}

.benefit_container {
  border-radius: 24px;
  margin-bottom: 12px;
  padding: 2px 8px;
  font-size: 16px;
  font-weight: 600;
  background-color: #f1e8dc;
  display: flex;
  align-items: center;
  flex: 1; /* 关键属性：让每个列表项拉伸至最高项的高度 */
}

原理：flex:1 会让每个子元素在 Flex 容器的垂直主轴上自动填充剩余空间，最终所有列表项的高度都会与最高项保持一致。

方案二：使用 Grid 布局（更简洁） #

Grid 天生支持等高行，只需给父容器设置 Grid 布局，并让每行高度自动匹配最高项：

.list {
  padding-left: 0;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr); /* 自动生成等高行 */
  gap: 12px; /* 用 gap 替代 margin-bottom，更规范的间距控制 */
}

.benefit_container {
  border-radius: 24px;
  padding: 2px 8px;
  font-size: 16px;
  font-weight: 600;
  background-color: #f1e8dc;
  display: flex;
  align-items: center;
}

原理：grid-template-rows: 1fr 会让每一行的高度等于该行中最高元素的高度，repeat(auto-fit, 1fr) 则会根据列表项数量自动生成对应行数，无需手动指定。

两种方案都能在移动端实现需求，根据你的习惯选择即可。

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