flex布局下表格表头与内容行完美对齐的实现方法

我有一个包含表头和对应下方数据条目的表格，目前表头和数据条目无法对齐，问题效果如下图所示：

我希望实现表头与各行数据的完美对齐，相关代码如下：

项目代码 #

Table.jsx #

<div className="home-trending">
      <h1 className="home-trending-heading"> CRYPTO TRENDING ON DEX</h1>
      <div className="cex-trending-data">
        <div className="dex-content-heading bold">
          <p className="cex-content-heading-item">Chain</p>
          <p className="cex-content-heading-item">Token Amount (out)</p>
          <p className="cex-content-heading-item">Token Amount (in)</p>
          <p className="cex-content-heading-item">TXN Value</p>
          <p className="cex-content-heading-item">Wallet Type</p>
          <p className="cex-content-heading-item">Time</p>
          <p className="cex-content-heading-item">Twitter</p>
        </div>
        {topDEXTrades.slice(0, 10).map((trade) => {
          return (
            <TrendingDexRows
              chain={trade.chain_name}
              time={trade.trade_time}
              token_out={trade.token_out}
              token_in={trade.token_in}
              trade_id={trade.id}
              symbol_out={trade.symbol_out}
              symbol_in={trade.symbol_in}
              value={trade.txn_value}
              hash={trade.txn_hash}
              wallet={trade.wallet}
              category={trade.category}
              timeToGo={timeToGoSec}
              href={twitterHref}
              detailedView={true}
              view="large"
            />
          );
        })}
      </div>
    </div>

Table.css #

.dex-content-heading {
  display: flex;
  justify-content: space-between;
}

Rows.jsx #

<div>
      <div className="cex-trending-row">
        <div className="cex-trending-row-name row-item">
          <img
            src={chainIcon(props.chain)}
            alt="btc"
            className="base-asset-img"
          />
          <p className="trending-symbol">{props.chain}</p>
        </div>
        <p className="row-item bold">{millify(props.token_out)}</p>
        <p className="row-item bold">{millify(props.token_in)}</p>
        <p className="row-item bold">{millify(props.value)}</p>
        <p className="row-item" style={categoryStyle(props.category)}>
          {categoryName(props.category)}
        </p>
        <p className="row-item"> {props.timeToGo(props.time)}</p>
        <div>
          <a
            href={props.href(
              props.value,
              props.token_out,
              props.token_in,
              props.chain,
              props.symbol_out,
              props.symbol_in
            )}
            target="_blank"
            rel="noreferrer"
            style={{ textDecoration: "none", paddingRight: "25px" }}
          >
            <img
              src={Twitter}
              alt="twitter"
              className="graph-icon-img-dex"
              style={{ marginLeft: "10px" }}
            />
          </a>
        </div>
      </div>
      <hr className="horrizontal-line" />
    </div>

Row.css #

.cex-trending-row {
  display: flex;
}
.row-item {
  flex: 1;
}

当前表头与数据行存在错位、无法对齐的问题，请问如何实现二者的完美对齐？需要使用哪个flex属性，才能保证表头和行两个flex容器内的子元素间距完全一致？

错位原因 #

对齐失败的核心是表头和数据行两个flex容器的布局规则不统一：

• 表头容器.dex-content-heading设置了justify-content: space-between，但数据行容器.cex-trending-row没加该属性，两者的子元素分配逻辑不一致
• 数据行最后一列包裹Twitter链接的div没有加row-item类，没有参与和其他列一致的flex宽度分配，相当于少了一个和表头对应的等宽列
• 原有代码写的flex: 1等价于flex: 1 1 auto，宽度分配会参考元素自身内容宽度，列内容长度差较大时会自动偏移，无法保证严格对齐

修复步骤 #

1. 统一两个flex容器的布局属性，给.cex-trending-row加上justify-content: space-between，和表头布局逻辑保持一致
2. 给数据行最后包裹Twitter链接的div加上row-item类，让7个数据列和7个表头项一一对应，全部参与flex宽度分配
3. 把所有列（包括表头项、数据行的row-item）的flex属性改为flex: 1 1 0%，强制所有列忽略自身内容宽度，按等比分配容器宽度，彻底避免内容长度影响对齐

修改后代码 #

修正后的Table.css #

.dex-content-heading {
  display: flex;
  justify-content: space-between;
}
/* 给表头项也加上统一flex规则 */
.cex-content-heading-item {
  flex: 1 1 0%;
}

修正后的Row.css #

.cex-trending-row {
  display: flex;
  justify-content: space-between; /* 和表头布局规则统一 */
}
.row-item {
  flex: 1 1 0%; /* 替换原有flex:1，强制等宽分配 */
}

修正后的Rows.jsx最后一列代码 #

{/* 给外层div加上row-item类 */}
<div className="row-item">
  <a
    href={props.href(
      props.value,
      props.token_out,
      props.token_in,
      props.chain,
      props.symbol_out,
      props.symbol_in
    )}
    target="_blank"
    rel="noreferrer"
    style={{ textDecoration: "none", paddingRight: "25px" }}
  >
    <img
      src={Twitter}
      alt="twitter"
      className="graph-icon-img-dex"
      style={{ marginLeft: "10px" }}
    />
  </a>
</div>

修改完成后表头和所有数据行的列宽分配规则完全一致，即可实现完美对齐。

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