打开mat-expansion面板正在移动对面的柱子，如何保持不动？

Question

在我的项目中，我有两列，每列都有自己的 mat-accordion，其中包含一些 mat-expansion 个面板。

当我点击打开任何一个扩展面板时，它正在向下移动对面的列。

这里是CSS。基本上，“行”包含两列，其中包含手风琴。

.row {
    padding-top: 120px;
    padding-left: 25px;
    padding-right: 25px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
}

.column {
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 50%;
    flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
    max-width: 50%;
  
}

.mat-expansion-panel {
    background: rgba(0, 0, 0, 0.7);
    width: px;
    margin-bottom: 1.5rem;
}

.mat-expansion-panel-header {
    height: 150px;
    font-family: Gotham HTF;
    font-size: 26px;
    justify-content: space-between;
    text-align: center;
}

如果没有被点击，我希望相对的列保持在原位。

有没有办法将相对的列保持在原位，以便只有单击 mat-expansion 面板的列在移动？如果没有这样的方法，有没有办法使用 mat-card 和 header 和内容来复制 mat-expansion 面板？我需要一切保持静止。

Answer 1

跟我猜的一样。您的行内容正在与中心对齐。例如将 align-items 更改为 flex-start 以将行内容对齐到行的顶部。

.row {
    ...
    align-items: flex-start;      
}

打开mat-expansion面板正在移动对面的柱子，如何保持不动？

Opening mat-expansion panel is moving the opposite column, how to keep it still?

html

css

panel

angular-material

angular