Блог

Я хотел реализовать дизайн ниже с картами , использующими гибкий макет с отступом , но он вызывает отвращение, я попробовал приведенный ниже стекблитц, но, похоже, не могу понять, что поле и макет либо уничтожены при попытке на других экранах, либо неправильном использовании гибкого. Кто-нибудь может помочь мне здесь с правильной реализацией гибкого макета с приведенным ниже примером дизайна ? мы высоко ценим вашу помощь. Спасибо.

https://stackblitz.com/edit/angular-mat-card-example-flsnue?file=src/app/app.component.css

Вот ваше рабочее решение

 <!---HTML--->
<div class="row">
    <div class="leftPannel">
        <mat-card class="card">
            Height will adjust based on content
        </mat-card>
    </div>
    <div class="rightPannel">
        <mat-card class="card">
        </mat-card>
        <mat-card class="card">
        </mat-card>
    </div>
</div>

/* CSS */
.row {
  display: flex;
  flex-wrap: wrap;
}

.leftPannel {
  width: 35%;
  margin-right: 20px;
}

.rightPannel {
  flex: 1;
}

.card {
  margin-bottom: 20px;
  background-color: #fff;
}

@media only screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
  .leftPannel {
    width: 100%;
    margin-right: 0;
  }
}