如何在Flexbox中实现类似<table>的行列对齐效果？

别用<table>来实现flex列换行，直接用纯Flexbox结构就能同时满足列对齐、自动换行、自适应内容宽度这三个需求，具体修改如下：

1. 替换HTML结构（放弃table元素） #

把原来的table/tr/td换成div容器，因为table的原生布局逻辑和flex冲突，强行修改display属性会丢失列对齐的特性：

<div class="flexContainer">
  {#each listingDetail as col, idx}
    <div class="row">
      <div class="colName">
        <span class="colId">{getValue(col,"INTERNAL_COLUMN_ID")}</span>
        <span class="colNameText">{getValue(col,"COLUMN_NAME")}</span>
      </div>
      <div class="colTypeDDL">
        <span class="colTypeText">{getValue(col,"DATATYPE_PSEUDO_DDL")}</span>
      </div>
    </div>
  {/each}
</div>

注：把原来的span.colName改名为colNameText，避免和父容器类名冲突，减少样式混淆。

2. 调整Flex样式 #

移除float相关属性，用flex布局实现对齐和换行：

.flexContainer {
  height: calc(100% - 17em);
  display: flex;
  flex-flow: column wrap; /* 垂直方向排列，超出高度自动换行 */
  align-content: flex-start; /* 内容顶部对齐，避免不必要的拉伸 */
  gap: 0.5em; /* 行之间的间距，可选 */
}

.row {
  display: flex;
  align-items: center; /* 行内元素垂直居中 */
  gap: 1em; /* 两列之间的间距 */
  min-width: 300px; /* 可选：设置每行最小宽度，避免换行后列过窄 */
}

.colName {
  display: flex;
  align-items: center;
  white-space: nowrap; /* 避免列内文字换行，可选 */
}

.colTypeDDL {
  white-space: nowrap; /* 保持数据类型不换行，可选 */
}

span.colId {
  display: inline-block;
  width: 2.5em;
  text-align: right;
  margin-right: 1em;
  font-weight: 900;
}

span.colNameText {
  font-weight: bold;
}

span.colTypeText {
  font-family: 'Consolas', monospace;
}

为什么这样有效？ #

• 外层flexContainer用column wrap实现了垂直排列+自动换行，当内容高度超出容器时，会自动往右侧生成新的列，完全避免滚动条。
• 每个row作为flex容器，会让所有行内的.colName自动对齐到最长的.colName宽度，.colTypeDDL同理，实现了和表格一致的列对齐效果。
• 所有元素都没有设置固定宽度，完全根据内容自适应，最长128字符的内容也能正常显示。

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