如何使用 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 卡片元素内实现弹性布局，以便两列响应并包含一些文本，如杂志中的文本：

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

尝试如下：

<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

Answer 3

如果你也想响应移动设备，你可以使用 flex-layout 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>

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

How to make two responsive columns inside the mat-card-content using fxLayout?

html

css

angular

angular-material

angular-flex-layout