Flex Table单元格高度同步方案咨询

首先咱们拆解下问题：你用Flex布局模拟表格，嵌套单元格高度统一时布局正常，但高度差异出现后就错乱——核心原因是Flex项（也就是你的单元格）默认高度由内容决定，要是单元格内部没设置正确的Flex层级，就没法自动拉伸到行内最高单元格的高度，最终导致各行/单元格对齐失效。

优先推荐纯CSS方案，不用改结构也不需要HTML Table，只要调整Flex的层级和属性就能解决：

纯CSS解决方案步骤 #

1. 基础行与单元格设置 #

先把行（.flex-row）和单元格（.flex-cell）的基础Flex属性配置正确：

.flex-row {
  display: flex;
  /* 强制所有单元格拉伸至行内最高元素的高度，这是核心关键 */
  align-items: stretch;
  /* 可选：添加边框模拟表格分隔线，增强视觉效果 */
  border-bottom: 1px solid #e0e0e0;
}

.flex-cell {
  /* 均分宽度，可根据需求调整flex值，比如固定宽度用flex: 0 0 200px */
  flex: 1;
  /* 让单元格成为Flex容器，确保内部嵌套元素能正确填充高度 */
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  border-right: 1px solid #e0e0e0;
}

2. 针对嵌套单元格的适配 #

根据嵌套单元格的排列方向，调整嵌套容器的Flex属性：

场景1：水平排列的嵌套单元格

/* 单元格内的水平嵌套容器 */
.nested-horizontal {
  display: flex;
  /* 占满父单元格的可用高度 */
  flex: 1;
  /* 强制嵌套子单元格拉伸至容器高度 */
  align-items: stretch;
}

/* 嵌套的子单元格 */
.nested-cell {
  flex: 1;
  /* 可选：设置内部内容的对齐方式，比如垂直居中 */
  display: flex;
  align-items: center;
  padding: 0.25rem;
}

场景2：垂直排列的嵌套单元格

因为父单元格已经设置了flex-direction: column，直接给垂直嵌套的子元素加flex: 1，就能让它们填充剩余空间、自动适配高度：

.nested-vertical {
  flex: 1;
  /* 可选：添加内边距或边框区分嵌套层级 */
  padding: 0.25rem;
}

这样设置后，不管嵌套单元格的内容高度如何，整行的所有单元格都会自动拉伸到行内最高元素的高度，保持布局整齐。

若纯CSS方案不适用（比如超复杂嵌套场景），最优JS方案 #

如果你的嵌套结构特别复杂，纯CSS无法覆盖所有情况，最简单的方案是用JavaScript动态同步每行单元格的高度：

// 同步所有Flex行的单元格高度
function syncFlexTableHeights() {
  document.querySelectorAll('.flex-row').forEach(row => {
    const cells = row.querySelectorAll('.flex-cell');
    let maxHeight = 0;

    // 先重置高度为auto，避免之前的设置影响计算结果
    cells.forEach(cell => cell.style.height = 'auto');

    // 计算当前行的最大单元格高度
    cells.forEach(cell => {
      const currentHeight = cell.offsetHeight;
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });

    // 将所有单元格高度统一设置为最大高度
    cells.forEach(cell => {
      cell.style.height = `${maxHeight}px`;
    });
  });
}

// 页面加载完成后初始化执行
syncFlexTableHeights();

// 窗口大小变化时重新计算（适配响应式场景）
window.addEventListener('resize', syncFlexTableHeights);

这个方案的优势是简单粗暴，不管嵌套结构多复杂，都能强制让每行的单元格高度统一；缺点是依赖JS，且窗口resize时会有计算开销，但对于大多数业务场景来说完全够用。

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