求助：用Flexbox实现无第四列表头的类表格布局对齐问题

不用纠结justify-content: space-between的对齐问题了，直接给每一列定好宽度规则，让表头和每一行的对应列宽度完全一致就行，具体这么做：

1. 统一列宽规则 #

不管是表头还是每个项目行，都把它们设为flex容器，然后给里面的列元素分配固定比例或者宽度：

• 前3列（表头存在的列）给相同的宽度配置，比如用flex: 1让它们平分空间，或者直接设固定像素值（比如width: 200px）
• 第4列（仅项目行有的列）根据需求设置宽度，比如让它占剩余空间（flex: 2）或者和其他列同宽（flex: 1）

2. 示例SCSS代码 #

假设你的结构是表头有3个元素，每个项目行有4个元素，代码可以这么写：

/* 表头和项目行都用flex布局，占满宽度 */
.table-header, .table-item {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}

/* 前3列统一宽度 */
.table-header > div, 
.table-item > div:nth-child(1),
.table-item > div:nth-child(2),
.table-item > div:nth-child(3) {
  flex: 1;
  padding: 0 12px;
  /* 内容换行防止撑爆列宽 */
  word-wrap: break-word;
}

/* 第4列设置宽度，这里让它占更多空间 */
.table-item > div:nth-child(4) {
  flex: 2;
  padding: 0 12px;
}

3. 为啥之前的方法不对？ #

justify-content: space-between是根据当前行内元素的总长度来分配剩余空间的，不同行内容长短不一样，剩余空间的分配比例就会变化，最后一列自然对不齐。而固定列宽的方式是强制每一列的宽度统一，从根源上解决对齐问题。

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