无法将席卡分为两列

Question

我正在尝试将<mat-card>分成两列，如下所示：

左边的图像可能占据了卡的25％，一列中的标题和2个扩展面板在右边。不管我尝试什么，总会有一个列，所以看起来像这样：

img h1 expansion panel expansion panel

在小屏幕上哪个还可以，但是对于大屏幕，我希望它像上面的图像一样。我还注意到，无论我添加样式还是更改样式，图像都不会调整大小。

这是HTML：

<div fxLayout="row wrap" fxLayoutAlign="center center">
  <mat-card *ngFor="let pet of pets">
    <mat-card-content>
      <div fxLayout="row">
        <div fxFlex="25%">
          <img src="{{ pet.imagePath }}" />
        </div>
        <div fxFlex="75%">
          <h1>{{ pet.name }}</h1>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              Favorite Foods!
            </mat-expansion-panel-header>
          </mat-expansion-panel>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              Bad ingredients!
            </mat-expansion-panel-header>
          </mat-expansion-panel>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>

我对上述内容的理解是

• 垫纸使用行换行法包装在div中，这意味着垫纸将显示为一行并在末尾换行到新行
• 在mat-card-content的内部，我有一个div使用fxLayout的行，这意味着每个子元素应并排放置。因为我将img拆分为一个div，将h1 / expansion面板拆分为另一个，所以这两个div应该并排正确吗？
• 因为我将第一个div设置为25％，所以它应该占行宽度的25％，而第二个div应该占行的75％。

我这里怎么了？

编辑：这是我从另一篇文章中看到的席卡的示例，与我要实现的功能类似。不幸的是，该解决方案不适用于我：How to set mat-card-image height to 100%?

更新：我很傻。我没有安装flex-layout模块。如果有人想知道为什么他们的fxlayout东西不起作用，请确保已安装并在导入中添加了它！