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

Posted 2023-03-06

【中文标题】如何使用 fxLayout 在 mat-card-content 中创建两个响应列？

【英文标题】：How to make two responsive columns inside the mat-card-content using fxLayout?

【发布时间】：2019-07-03 08:41:18

【问题描述】：

这是我的 HTML 代码 sn-p:

<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 card 元素中实现 flex 布局，以便两列响应并包含杂志中的一些文本：

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

【问题讨论】：

我解决了这个问题：<mat-card-content> <div fxLayout="row" fxFlex="1 0 0" fxLayoutAlign="space-between" fxLayoutGap="15px"> <div fxLayout="column" fxFlex="1 0 0">My</div> <div fxLayout="column" fxFlex="1 0 0"> <ul> <li></li> </ul> </div> </div> </mat-card-content>

【参考方案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

【参考方案2】：

尝试如下：

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

    </div>
</div>

【参考方案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>