flex布局赛事对阵树视图如何实现bracket列等高布局？

调整方案 #

核心原理

通过让所有对阵列自动等高，再将列内每个对阵容器平均分配高度，最后让对阵卡片在容器内垂直居中，就能实现下一轮对阵自动对齐上一轮相邻两个对阵的中间位置。

具体修改步骤

1. CSS 调整

/* 新增最外层容器样式，替换原来的通用flex类，避免影响其他布局 */
.bracket-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 关键属性：所有子列自动拉伸到和最高列等高 */
  gap: 2em; /* 替代原列的右外边距，布局更规范 */
}

.bracket-column {
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center; /* 列内元素水平居中 */
}

.bracket-wrapper {
  flex: 1; /* 平均分配列内高度 */
  display: flex;
  justify-content: center;
  align-items: center; /* 对阵卡片在分配的高度区域内垂直居中 */
  width: 100%;
}

.bracket {
  padding: 0.5em;
  border: 2px solid styles.$highlight-color;
  width: 150px;
  background-color: styles.$additional-darker-color;
  p {
    margin: 0;
    width: 100%;
    color: styles.$additional-color;
    span {
      color: white;
    }
  }
}

/* 保留原有的通用flex类即可 */
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. HTML 调整

把最外层包裹所有对阵列的容器类换成新增的bracket-container，移除行内的强制样式：

<div class="bracket-container">
  <div *ngFor='let stage of stages; let i = index' class="bracket-column">
    <div *ngFor='let pair of stage; let last = last' class="bracket-wrapper">
      <div *ngIf="pair.bracket === 1" class="bracket">
        <p class="flex" [class.glow-text]='pair.score_participant_one > pair.score_participant_two'>{{pair.participant_one.user.username}} <span class="score">{{pair.score_participant_one}}</span></p>
        <hr>
        <p class="flex" [class.glow-text]='pair.score_participant_one < pair.score_participant_two'>{{pair.participant_two ? pair.participant_two?.user.username : 'BYE' }} <span class="score">{{pair.participant_two ? pair.score_participant_two : '-'}}</span></p>
      </div>
    </div>
  </div>
</div> 

3. 数据预处理补充（可选，针对空对阵场景）

如果某轮对阵数量没达到对应轮次的标准数量，请在stages数组对应位置补空对象作为占位项，保证每列的bracket-wrapper数量和该轮次应有的对阵数量一致，高度分配才会完全符合预期。

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