html - 如何使用 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);
}

我需要在 Angular Material 卡片元素内实现 flex 布局，以便两列响应并包含一些文本，如杂志中的文本:

此刻我已经完成了 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 demo