遍历数组时如何让所有<li>元素保持相同高度？

嗨，我完全懂你的困扰——想用<li>实现类似表格的等高效果，但min-height没法完美填充空白区域对吧？其实用CSS的Flexbox或者Grid就能轻松搞定，这两种布局天生支持让容器内的子元素自动和最高的元素保持同高，完全不用手动计算高度～

方法一：Flexbox 布局（推荐） #

给<ul>（也就是你的列表容器）设置Flex布局，子元素<li>会自动对齐高度：

React 代码 #

<ul className="service-container">
  {serviceList.map(service => (
    <li key={service.id} className="service">{service.name}</li>
  ))}
</ul>

CSS 样式 #

/* 列表容器 */
.service-container {
  display: flex;
  flex-wrap: wrap; /* 让li超出宽度时自动换行 */
  margin: 0;
  padding: 0;
  list-style: none; /* 可选：去掉默认的列表圆点 */
}

/* 单个列表项 */
.service {
  border-radius: 0;
  flex: 0 0 20%; /* 固定宽度20%，不拉伸不收缩 */
  padding: 12px;
  box-sizing: border-box; /* 关键！避免padding撑开宽度导致布局错乱 */
  /* 可以加边框/背景测试效果，会自动填满整个高度 */
  border: 1px solid #eee;
}

方法二：Grid 布局（更简洁） #

Grid布局的写法更直观，直接定义列数即可实现等高：

CSS 样式（React代码和上面一致） #

.service-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列等宽，每列占20% */
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  border-radius: 0;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #eee;
}

为什么min-height不行？ #

min-height只是给元素设置了一个最小高度下限，当内容高度小于这个值时，元素高度是min-height，但如果有元素内容更高，其他元素不会自动拉伸到这个高度——而Flex/Grid容器会强制子元素填充容器的可用空间，所以所有<li>都会和最高的那个保持一致高度，完美填充空白区域～

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