У меня проблема с поведением гибкого макета в приложении на основе Angular Material.Я хочу иметь простую раскладку «карточная сетка» с 3 карточками в ряд (самые большие экраны), 2 карточками на средних размерах и 1 карточкой на маленьких экранах.Проблема в том, что у меня только 1 карта в последнем ряду на самом большом экране, потому что последняя ширина карты составляет 100% ширины экрана.Как избежать этой проблемы?
Вот мой текущий код.
<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>
Редактировать: нет разрыва между картами.Проблема в том, что последняя карта имеет 100% ширину всего макета (не 1/3, как у других).
