根据可用空间显示组件ANGULAR/CSS

Question

问题

我需要使用*ngFor指令动态显示这样的项目。

说明

每个组件都有相同的宽度，但我无法正确显示垂直对齐(正如您从图像中看到的，组件被"推"到顶部(。

我尝试了什么

1. 我第一次尝试使用引导程序container、row和col

2. 我尝试将container与display: flex结合使用，但没有成功。

这是我迄今为止获得的最好的

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
}
.fixedWidth {
margin: 2vw;
width: 18rem;
border-radius: 10px;
-webkit-box-shadow: 9px 14px 20px -7px rgba(224, 224, 224, 1);
-moz-box-shadow: 9px 14px 20px -7px rgba(224, 224, 224, 1);
box-shadow: 9px 14px 20px -7px rgba(224, 224, 224, 1);
background-color: tomato;
}

<div class="container">
<div class="text-center center fixedWidth" *ngFor="let collect of collections">
<app-user-collection [collection]="collect">
</app-user-collection>
</div>
</div>

问题

如何使用angular、bootstrap或CSS来实现这一点？

编辑

谢谢你的回答！

这是我得到的和我想要的。集合的顺序并不重要！

这是的主要集装箱

.categoriesHeight {
height: 100vh;
}
@media (max-width: 768px) {
.categoriesHeight {
height: auto;
}
}

<div class="container-fluid">
<div class="row">
<div class="col-md-1 categoriesHeight">
<app-user-menu></app-user-menu>
</div>
<div class="col-md-11 vh-100">
<router-outlet></router-outlet>
</div>
</div>
</div>

这是app-user-collection

<div class="row">
<div class="col-md-12">
<p><strong>
{{ collection.name }}
</strong></p>
</div>
</div>
<div class="row" *ngFor="let pack of collection.packets">
<div class="col-md-12">
<app-collection-packets [packet]="pack">
</app-collection-packets>
</div>
</div>

和app-collection-packets

<p>
{{ packet.name }}
</p>

Answer 1

我可以创建一个模板，但使用这个模板，您将不得不折衷集合的顺序，即它们将从上到下运行，而不是从左到右。我希望你使用的是bootstrap 4。我希望这将给你足够的时间在你的项目结构中实现它。

<div class="container d-flex">
<div class="d-block mr-2">
<div class="border d-flex flex-column p-5 mb-2">
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test1</p>
<p>test1</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
</div>
</div>
<div class="d-block mr-2">
<div class="border d-flex flex-column p-5 mb-2">
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test2</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
</div>
</div>
<div class="d-block">
<div class="col border d-flex flex-column p-5 mb-2">
<p>test3</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test3</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test3</p>
<p>test3</p>
<p>test3</p>
<p>test3</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test3</p>
<p>test3</p>
<p>test3</p>
<p>test3</p>
</div>
<div class="border d-flex flex-column p-5 mb-2">
<p>test3</p>
<p>test3</p>
<p>test3</p>
<p>test3</p>
<p>test3</p>
<p>test3</p>
</div>
</div>
</div>

小提琴在这儿：https://jsfiddle.net/yqx2zwd9/1/