根據可用空間顯示組件 ANGULAR/CSS

Question

問題

我需要動態顯示的項目，如本使用*ngFor指令。

描述

每個組件都具有相同的寬度，但我無法正確顯示垂直對齊（如您從圖像中看到的，組件被“推”到頂部）。

我試過的

1. 我首先嘗試使用引導container 、 row和col

2. 我嘗試使用帶有display: flex container ，但沒有成功。

這是迄今為止我得到的最好的

 .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/