如何让Flexbox表现为表格？解决列宽均等及垂直对齐问题

我太懂你的困扰了——Flexbox虽然灵活，但它从设计初衷就不是为表格这种需要严格列对齐、自适应内容宽度的布局而生的，默认配置下很容易出现列宽强制平分、垂直对齐混乱的问题。下面给你两种针对性的解决思路：

方案一：调整Flex属性，适配表格需求 #

先补全你未写完的代码（假设单元格类是.table__cell），原始代码里导致列宽一致的核心原因，大概率是给单元格设置了flex: 1，强制所有列平分可用空间。我们可以修改Flex属性让列自适应内容，同时解决垂直对齐问题：

修改后的Flex代码 #

.table {
  display: flex;
  flex-flow: column;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  max-width: 100%;
}
.table__row {
  display: flex;
  max-width: 100%;
  border-bottom: 1px solid #000;
  align-items: center; /* 让单元格内容垂直居中 */
}
.table__cell {
  flex: 0 1 auto; /* 关键：不强制放大，仅空间不足时缩小，宽度完全由内容决定 */
  border-right: 1px solid #000;
  padding: 8px;
}
/* 如果需要某几列拉伸填充剩余空间，单独给这些列加样式 */
.table__cell--stretch {
  flex: 1;
}

效果说明 #

• flex: 0 1 auto 让单元格宽度完全由自身内容决定，不会被强制平分空间；
• align-items: center 确保每行的单元格内容自动垂直居中；
• 要是需要特定列（比如最后一列）拉伸占满剩余空间，给该列加.table__cell--stretch类即可。

方案二：用CSS Grid实现原生表格级别的布局 #

如果需要和原生表格完全一致的列对齐效果（所有行的同一列宽度相同，由该列最宽内容决定），Flexbox很难做到这一点——这时候CSS Grid是更合适的选择，它天生支持这种二维布局逻辑：

Grid实现代码 #

.table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, auto)); /* 列宽度自适应内容 */
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  max-width: 100%;
}
.table__row {
  display: contents; /* 让行元素不参与布局，单元格直接成为Grid的子项 */
}
.table__cell {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 8px;
  align-self: center; /* 垂直居中内容 */
}

效果说明 #

• display: contents 让行元素“隐身”，单元格直接归属Grid容器，这样同一列的单元格会自动对齐，宽度由该列最宽的内容决定；
• 完全复刻原生表格的列行为，同时保留现代布局的灵活性。

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