带有扩展面板间距问题的 Flex Row

Question

我在伸缩行内的扩展面板间距方面遇到问题

我有多个Mat-Expansion-Panel 里面一个ngFor 里面有多个项目，每个面板都有不同的项目长度。

现在，当我展开一个面板时，它旁边的面板也会展开到相同的高度，但不显示项目（因为它没有真正展开）

我创建了一个堆栈闪电战：https://stackblitz.com/edit/mat-expansion-panel-x8qz9z

由于我的小组成员是一个单独的组件，并且以不同的布局多次使用，我真的需要在 *ngFor 内创建 2 个单独的列来完成这项工作吗？

Edit1：我在 the mat-expansion-panel 上尝试过 height:max-content，但问题是面板 3 应该在面板 1 下向上移动。

容器上的align-items:baseline;也存在同样的问题

亲切的问候

Answer 1

只能使用 2 个单独的列来完成。您可以将数组分成两列，或者您可能需要的任意多列，如下所示：

columns = [
  this.panels.slice(0, Math.ceil(this.panels.length / 2)),
  this.panels.slice(Math.ceil(this.panels.length / 2))
];

您可以在模板中使用此数组：

<div class="panel-container">
  <div class="panel-column" *ngFor="let columnPanels of columns">
    <mat-expansion-panel class="panel" *ngFor="let panel of columnPanels">
      <mat-expansion-panel-header>
        {{panel.name}}
      </mat-expansion-panel-header>

      <div *ngFor="let item of panel.items">{{item}}</div>
    </mat-expansion-panel>
  </div>
</div>

并更新您的 css：

.panel-container {
  display:flex;
  flex-direction:row;
}

.panel-column {
  flex: 1;
}

.panel {
  margin: 10px;
  height: max-content;
}

stack