проблема с выравниванием angularfxlayout div - PullRequest
Новая
       29

проблема с выравниванием angularfxlayout div

0 голосов
/ 05 марта 2019

Я пытаюсь отобразить карточки в сетке с адаптивным макетом, где, если необходимо, карточек по 4 на строку против 3 на строку и так далее.Я использую angularfxlayout для этого, который работает хорошо, но div не выровнены между строками.

Как это:

enter image description here

Желаемый выход:

enter image description here

Вот мой код: 

<div fxLayout fxFill fxLayoutAlign="space-around center">
<div fxLayout="row wrap" fxFlex="90%" fxLayout.lt-md="column" fxLayoutGap="2%" fxLayoutAlign="center center">
    <ng-container *ngFor="let dinner of dinners">
        <mat-card class="card-picture" fxLayout="column" >
            <mat-card-title class="dinner-title-details">
              <span>{{dinner.title}}</span>        
            </mat-card-title>
            <mat-card-content>
                <img mat-card-image src="../assets/dinnersample.jpg">
            </mat-card-content>
            <mat-card-actions>
                <i class="fab fa-facebook facebook"></i>
                <i class="fab fa-twitter twitter"></i>
                <i class="fab fa-instagram instagram"></i>
            </mat-card-actions>
          </mat-card>
    </ng-container>  
  </div>

Есть ли способ, которым я могу сделатькарты тоже выровнены по вертикали?Спасибо!

1 Ответ

0 голосов
/ 05 марта 2019

Я сделал две вещи, чтобы заставить его работать под Firefox и Chrome.

удаление fxLayoutAlign = "center center" и установка фиксированной ширины на изображении (ширина я не уверен на 100%, но пожалуйстапроверяю, порой бывали незначительные различия, казалось).Я также включаю общий сброс полей и отступов, но я думаю, у вас уже было это.

пожалуйста, обратитесь к этому упрощенному стеку: https://stackblitz.com/edit/angular-yetkra?embed=1&file=src/app/app.component.html

Поскольку у меня нет вашего CSS, я не знаю, что еще может быть не так.

...