如何解决angular 7 mat-card in only row 使用 flex 布局
我使用 angular 7,并使用 mat-card 和 flex 布局。
我只想并排放置在一行中 并且三张卡片将在页面居中(意味着三张卡片的位置将在中心)
我使用此代码:
.html
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
<mat-card class="example-card" *ngFor="let member of members" fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" >
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{member.title}}</mat-card-title>
<mat-card-subtitle>{{member.subtitle}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image [src]="member.url" alt="Photo of {{member.title}}">
<mat-card-content>
<p>
{{member.content}}
</p>
</mat-card-content>
</mat-card>
</div>
.ts
@Component({
selector: 'app-card-view-demo',templateUrl: './card-view-demo.component.html',styleUrls: ['./card-view-demo.component.scss']
})
export class CardViewDemoComponent implements OnInit {
constructor() { }
ngOnInit() {
}
members: {title: string,subtitle: string,content: string,url: string}[] = [
{title: 'Title',subtitle: 'Subtitle',content: 'Content here',url: '../../assets/img/app/shiba2.jpg'},{title: 'Title',];
}
.css
.content {
padding: 16px;
}
.content > mat-card {
width: 200px;
}
但根据此代码,卡片是垂直的并且不在同一行中。 并且每张卡片都有 100% 的页面大小。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。