如何使用 fxLayout 在 mat-card-content 中制作两个响应列？

Question

这是我的HTML代码片段：

<mat-card-content>
    <div fxLayout="row" fxFlex="1 0 0">
        <div fxLayout="column">First</div>
        <div fxLayout="column" style="margin-left:auto">Second</div>
    </div>
</mat-card-content>

和CSS：

.mat-card-content {
    color: rgba(0, 0, 0, 0.700);
}

我需要在角度材料卡元素内实现柔性布局，以便两列能够响应并包含一些文本，如杂志中的内容：

现在我已经完成了 mat-card-header 并且它工作正常。任何建议将不胜感激。

Answer 1

尝试如下：

<div fxLayout="row" fxLayoutGap="10">
  <div fxFlex="50%">
 <p> first div </p>
  </div>
  <div fxFlex="50%">
      <p> second div </p>

    </div>
</div>

2022 年更新：

Stackblitz 演示