带角度材料卡的多角度柔性布局

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