我正在寻找这种布局的Angular 2/4示例.我需要从两列牌开始(左侧2个,右侧1个).但是,如果屏幕很小,它们应该折叠到一列.我可以在带有div的CSS中完成它,但在Material 2中必须有一个简单的方法 – 有很多Material 1的例子.
这段代码改编自Angular Material 1答案,但它不起作用(我将“row”更改为“column”,希望这样可行,但我只得到一列有三张牌)：
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％.”
解决方法
首先,在您的应用中添加@ 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>
