如何解决flex布局下列表项因文本长度不同无法对齐的问题

问题根因 #

你当前的每个<li class="list">都是独立的flex容器，不同行的列宽只会根据当前行的内容计算，不会和其他行的同序列宽保持一致。当某一行的客户名称较长时，就会撑宽当前行第一列的宽度，挤压其他列的空间，最终导致跨行列无法对齐。

最优解决方案：使用CSS Grid布局 #

Grid布局天然适合二维的表格类场景，只需要在父级<ul>上定义全局列宽规则，所有行的列都会自动对齐，不需要截断客户名称，改造成本也很低。

修改后的CSS代码 #

/* 给父级ul添加grid布局规则 */
#data-table ul {
  margin: 0;
  padding: 0;
  display: grid;
  /* 按需定义7列的宽度：第一列自动适配最长客户名，中间5列自动适配内容，最后一列保留原设置的221px */
  grid-template-columns: auto repeat(5, auto) 221px;
  /* 列间距，可根据需求调整 */
  column-gap: 2rem;
}

#data-table .list {
  /* 让li的子元素直接参与ul的grid布局，不需要再作为独立flex容器 */
  display: contents;
  color: #97A1A9;
  font-size: .9rem;
}

#data-table .list>* {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

#data-table .list div:first-child {
  /* 第一列可选左对齐，更符合阅读习惯，要居中的话改回center即可 */
  justify-content: flex-start;
  padding-left: 2rem;
}

#data-table .list div:first-child input[type="checkbox"] {
  margin-right: 7px;
}

#data-table .list div:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2rem;
}

代码说明 #

• 不需要修改原有HTML结构，仅调整CSS即可生效
• 第一列宽度会自动适配所有行客户名称的最大长度，不需要做文本截断
• 所有列的宽度全局统一，天然实现跨行列对齐
• 备注列的溢出截断规则保留原有逻辑不变

备选方案：Flex布局下给每列设固定宽度 #

如果要保留原有的flex结构，需要给每一列手动设置固定的基础宽度，保证所有行同列宽度一致：

/* 保留原有list的flex配置 */
#data-table .list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  color: #97A1A9;
  font-size: .9rem;
  white-space: nowrap;
}
/* 给每列设置固定flex基础宽度，数值可根据实际需求调整 */
#data-table .list div:nth-child(1) { flex: 0 0 220px; display: flex; align-items: center; justify-content: center; }
#data-table .list div:nth-child(2) { flex: 0 0 100px; }
#data-table .list div:nth-child(3) { flex: 0 0 140px; }
#data-table .list div:nth-child(4) { flex: 0 0 100px; }
#data-table .list div:nth-child(5) { flex: 0 0 120px; }
#data-table .list div:nth-child(6) { flex: 0 0 140px; }
#data-table .list div:nth-child(7) { flex: 0 0 221px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#data-table .list>* {
  padding: 1rem 2rem;
}

#data-table .list div:first-child input[type="checkbox"] {
  margin-right: 7px;
}

这个方案的缺点是需要提前预估每列需要的宽度，灵活度不如Grid方案。

原问题运行效果 #

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