如何使用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

您可以根据需要尝试使用此代码

<mat-card-content>
      <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
        <div fxLayout="column">First</div>
        <div fxLayout="column">Second</div>
      </div>
</mat-card-content>

为了更好地理解

https://stackblitz.com/edit/angular-sozro8?file=src%2Fapp%2Fapp.component.html

Answer 2

尝试如下：

has_argument()

Answer 3

如果您还想对移动设备做出响应，则可以使用弹性布局Responsive API。

<mat-card-content>
   <div fxLayout.gt-sm="row" fxLayout="column" fxLayoutGap="16px">
       <div fxFlex.gt-sm="50%" fxFlex>
          First div
       </div>
       <div fxFlex.gt-sm="50%" fxFlex>
          Second div
       </div>
    </div>
</mat-card-content>