display flex 不会像预期的那样打断长行

Question

尝试使用 flex 显示在一行中显示一个列表。我正在使用 angular 7 进行开发。下面是我实现的HTML：

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div class="d-flex">
    <div *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="i > 0">,</span><span *ngIf="allergy"> {{ allergy }}</span>
      <span *ngIf="!allergy">None</span>
    </div>
  </div>
</div>

d-flex 是 bootstrap 显示器 class:

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

在我的组件过敏设置为

allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];

显示：

正如所见，列表没有正确分解并且显示失真。当列表长度超过计算的列宽时会发生这种情况。如何将其显示为按预期正确中断的列表？如果我可以改进我的问题或者我可以提供更多信息，请告诉我。

Answer 1

对于 angular，我建议您使用 Angular 中的 Flex-layout。

使用row wrap

包裹物品

使用您的代码，您还可以：

<div class="d-flex">
  ...
  ...
    <div *ngFor="let allergy of allergies; let i = index" class="d-flex">
       ...
    </div>
  </div>
</div>

Answer 2

我想这就是你想要的：

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div>
    <ng-container *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="allergy">{{ allergy }}</span><span *ngIf="i < allergies.length - 1">, </span>
      <span *ngIf="!allergy">None</span>
    </ng-container>
  </div>
</div>

这是一个 stackblitz 示例，展示了它的样子。

希望这对您有所帮助...

display flex 不会像预期的那样打断长行

display flex does not break long lines as expected

html

css

flexbox

display

angular