Angular 角材料-柔性布局和卡片
我对基于角度材料的应用程序中的flex布局行为有问题。我想有一个简单的“卡片网格”布局,3张卡片排成一行(最大的屏幕),2张卡片排成中等大小,1张卡片排成较小的屏幕。 问题是当我在最大屏幕的最后一行只有一张卡时,因为最后一张卡的宽度是屏幕宽度的100%。如何避免这个问题 这是我目前的代码Angular 角材料-柔性布局和卡片,angular,angular-flex-layout,angular-material-7,Angular,Angular Flex Layout,Angular Material 7,我对基于角度材料的应用程序中的flex布局行为有问题。我想有一个简单的“卡片网格”布局,3张卡片排成一行(最大的屏幕),2张卡片排成中等大小,1张卡片排成较小的屏幕。 问题是当我在最大屏幕的最后一行只有一张卡时,因为最后一张卡的宽度是屏幕宽度的100%。如何避免这个问题 这是我目前的代码 <div class="page-wrapper"> <div fxLayout="row wrap" fxLayoutGap="16px" class="align" *ngIf="!l
<div class="page-wrapper">
<div fxLayout="row wrap" fxLayoutGap="16px" class="align" *ngIf="!loading">
<mat-card fxFlex.lg="calc(33% - 16px)" fxFlex.lt-lg="calc(50% - 16px)" fxFlex.xs="calc(100% - 16px)"
*ngFor="let post of posts">
<mat-card-header>
<mat-card-title>{{ getCleanString(post.title.rendered) }}</mat-card-title>
<mat-card-subtitle>{{ post.date_gmt | date }}</mat-card-subtitle>
</mat-card-header>
<img matCardImage [src]="post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url"
class="card-image">
<mat-card-content [innerHTML]="post.excerpt.rendered"></mat-card-content>
<mat-card-actions align="start">
<a mat-button color="primary" [href]="post.link">Czytaj więcej</a>
</mat-card-actions>
</mat-card>
</div>
</div>
{{getCleanString(post.title.rendered)}
{{post.date_gmt|date}
编辑:卡片之间的间隙没有问题。问题是最后一张卡片的宽度是整个版面的100%(而不是其他卡片的1/3)
尝试将
0
添加到fxFlex.lg
中,如下所示:fxFlex.lg=“0 1计算(33%-16px)”
这将移除flex grow
注意:您必须添加
右边距:16px编码>到最后一个元素以获得正确的对齐方式如何使最后一行可见?我希望所有卡片的宽度相同,也是最后一行。因此,例如在“lg”情况下,所有卡的宽度应为33%。