我在 Angular 4 中使用 flex 布局模块,我尝试在桌面模式下并排显示卡片布局,在移动模式下它应该是一个下面一个,但它对我不起作用请建议正确的代码。
下面是我的代码:
<div fxLayout="row" fxLayout-gt-xs="column">
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #1</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #2</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
使用此版本:@angular/flex-layout
:^2.0.0-beta.9
最佳答案
默认情况下, block 元素被放置在不同的行中。您只需要处理 xs 屏幕的方向。
使用这个:-
<div fxLayout.xs="column">
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #1</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #2</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
</div>
关于css - flex 布局无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46865288/