Angular Material 2 md-card 响应列

Question

我正在寻找此布局的 Angular 2/4 示例。我需要从两列卡片开始（左列 2 个，右列 1 个）。但是，如果屏幕很小，它们应该折叠为一列。我可以在带有 div 的 CSS 中做到这一点，但是在 Material 2 中必须有一个简单的方法——有很多 Material 1 示例。

这段代码改编自 Angular Material 1 的答案，但它不起作用（我将“行”更改为“列”希望能起作用，但我只得到一列包含三张卡片的内容）：

如何创建带有角材料的卡片网格？

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 1</h2>
      </md-card-content>
    </md-card>

    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 2</h2>
      </md-card-content> 
    </md-card>
</div>

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Right Column </h2>
      </md-card-content>
    </md-card>
</div>

来自答案：“在此示例中，您将有两张卡片（每张 40%），当屏幕调整为 -sm 时，卡片将位于 80%。”

Answer 1

首先，@angular/flex-layout在您的应用程序中添加包。阅读更多关于“flex-layout”的信息。然后，你需要输入FlexLayoutModule你的app.module.ts进口条目：

import { FlexLayoutModule } from '@angular/flex-layout';

....
@NgModule({
    imports: [
        // other modules
        // .....
        FlexLayoutModule
    ],
    ....

然后您可以在您的应用程序中使用“flex-layout”。要使卡片具有您提到的响应性，您可以使用以下模板：

<div fxLayout="row" fxLayout.xs="column">
    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 1</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 2</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="20%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Right Column </h2>
        </md-card-content>
    </md-card>
</div>

链接到stackblitz 演示。