带有角材料卡的角多个柔性布局

Question

我想用带有边距的 flex 布局的卡片来实现下面的设计，但它是响应式的，我尝试了下面的 stackblitz 但似乎无法弄清楚，边距和布局要么在其他屏幕上尝试被破坏，要么错误使用弹性。任何人都可以在这里通过下面的示例设计帮助我正确实现 flex 布局？高度赞赏帮助。谢谢。

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

Answer 1

这是您的工作解决方案

<!---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;
  }
}