Css 无法将mat卡拆分为两列

我正在尝试将一个

拆分为两列，如下所示：

左侧的图像可能占卡的25%，右侧的列中有一个页眉+2个扩展面板。无论我尝试什么，始终只有一列，因此它看起来如下所示：

img
h1
扩展面板
扩展面板

这在小屏幕上很好，但对于大屏幕，我希望它像上面的图片一样。我还注意到，无论我是否向图像添加样式并对其进行更改，图像都不会调整大小

以下是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>

{{pet.name}
最喜欢的食物！
坏配料！

我对以上的理解是

• 使用行换行将垫卡包装在一个div中，这意味着垫卡将显示在一行中，并在末尾换行到一个新行
• 在mat card内容的内部，我有一个div，它使用了fxLayout的行，这意味着每个子元素应该并排排列。因为我把img分成了一个div，而把h1/扩展面板分成了另一个div，所以这两个div应该并排排排列，对吗
• 因为我将第一个div设置为25%，所以它应该占行宽度的25%，而第二个div应该占行宽度的75%

我这里怎么了

编辑：这是我在另一篇文章中看到的一张mat卡的例子，与我试图实现的目标类似。不幸的是，解决方案对我不起作用：

---

更新：我很笨。我没有安装flex布局模块。如果有人想知道为什么他们的fxlayout功能不起作用，请确保已安装并添加到导入中

不熟悉该库，但是否有一种方法可以将

display:flex

添加到

mat-card

或

mat-card-content

？这应该将子元素并排放置，而不是堆叠它们。请尝试。不幸的是，它没有起作用。我用

mat-card

，

mat-card-content

，以及我放在它周围的

div

尝试了它。你的代码在这方面工作得很好。我在两张牌之间加了一个简单的间隔。除此之外，我什么也没做。