动态两种方式布局html角度

Question

<div class ="row">
   <div class ="col-md-6">
     Xyz
   </div>
   <div class ="col-md-6">
     Abc
   </div>
</div>

我可以通过这样做轻松实现两种布局，但我的列元素在一个数组中

字段 = [ 'xyz', 'Abc', 'pqr','stuv' ]

<div *ngFor="field of fields">
   <div class ="col-md-6">
     {{field}}
   </div>
</div>

如何实现双向布局 在一个 for 循环中。数组元素也有不同的宽度和高度我希望它足够灵敏，因为数组长度不固定，外部 div 的大小也不固定，因为它取决于数组中的元素数量

Answer 1

使用 CSS flex。

您的 HTML 代码如下所示

 <div class="flex-container">
   <div *ngFor="field of fields" class="flex-item">
     {{field}}
   </div>
 </div>

css如下

.flex-container {
   display: flex;
   flex-wrap: wrap;
}

.flex-item {
   width: 45%;
   margin: 5px;
}