使用*ngFor遍历数组时如何实现前两项横向其余纵向排列

问题原因 #

你的代码核心问题在于外层父容器设置了flex-row，所有*ngFor生成的子div都是这个横向flex容器的直接子项，默认会全部横向排列。你给内部span添加的flex-column仅作用于span内部的元素布局，不会改变子div在父容器中的排列规则，因此无法实现预期效果。

解决方案 #

方案1：拆分数组渲染（推荐，可读性最高）

将数组拆分为前2项和剩余项两部分分别渲染，逻辑清晰易维护：

<!-- 前2个元素横向排列 -->
<div class="d-flex flex-row gap-2">
  <div *ngFor="let item of array.slice(0,2)">
    {{item}}
  </div>
</div>
<!-- 剩余元素纵向排列 -->
<div class="d-flex flex-column">
  <div *ngFor="let item of array.slice(2)">
    {{item}}
  </div>
</div>

方案2：单个循环配合flex布局实现

如果不想写两次*ngFor，可以用flex换行+宽度控制实现：

<div class="d-flex flex-wrap">
  <div *ngFor="let item of array; let i = index" 
       [ngClass]="i < 2 ? 'w-50' : 'w-100'">
    {{item}}
  </div>
</div>

外层父容器加flex-wrap允许元素溢出换行，前2个元素各占50%宽度刚好撑满一行，剩余元素占100%宽度自动换行，每个单独占一行，即可实现预期布局。

内容的提问来源于stack exchange，提问作者Enrique GF