Angular Material 2 md-card 响应列

Question

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

此代码改编自 Angular Material 1 的答案，但它不起作用(我将“行”更改为“列”，希望它能起作用，但我只得到一个包含三张卡片的列):

how do i create a grid of cards with angular material?

<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" 的信息.然后，您需要在 app.module.ts 导入条目中导入 FlexLayoutModule:

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 demo .