具有角度材料卡的角度多柔度布局

Question

我想用卡片实现下面的设计，使用带边距的flex布局，但反应迟钝，我尝试了下面的stackblitz，但似乎无法弄清楚，边距和布局要么是在其他屏幕上尝试破坏，要么是错误地使用flex。有没有人能帮我在这里用下面的示例设计正确实现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;
  }
}