角度材料卡布局问题

Question

我试图将两张卡片放在一起。

左侧的卡片有display: flex，因此我可以将其内容放在中心位置。

我无法弄清楚如何制作下一张卡片，坐在旁边卡片而不在左侧inline-block上制作卡片。

以下是包含详细信息组件的initials component。

<mat-card class="card card-initials">
    <span>BD</span>
</mat-card>

<details-component></details-component>

这是该组件的CSS。

.card{
    padding: 0;
    width: 225px;
    margin: 15px 15px 0 15px;
}

.card-initials {
    display: flex;
    flex-wrap: nowrap;
    background-color: #D3DCE5;
    border-bottom: #afbfd0 1px solid;
}

.card-initials span {
    text-align: center;
    width: inherit;
    line-height: 225px;
    font-size: 72px;
}

这是详细信息组件，我计划在首字母组件旁边放置两张卡片。

<mat-card>
    Personal Info
</mat-card>

不确定要放在哪个显示属性上。

以下是目前的情况，

以下是我希望它的外观，让您更好地了解我的目标：

Answer 1

使用angular flex-layout。

使用div：

在卡片周围包裹fxLayout="row"

<div fxLayout="row">
  <div>
    <mat-card class="card card-initials">
      <span>BD</span>
    </mat-card>
    <details-component></details-component>
  </div>

  <div fxLayout="column">
    <mat-card>details box 1</mat-card>
    <mat-card>details box 2</mat-card>
  </div>
</div>