Angular 多个弹性布局，带有 angular material 张卡片

Question

我想通过使用带边距的弹性布局的卡片来实现下面的设计，但是有反应，我已经尝试了下面的 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;
  }
}

Angular 多个弹性布局，带有 angular material 张卡片

Angular multiple flex layout with angular material cards

css

flexbox

angular-material

angular