Angular中ngFor循环生成的元素如何实现横向排成一行？

问题原因 #

<ng-container> 是Angular提供的虚拟逻辑容器，不会被渲染为真实的DOM节点，因此你为它设置的flex样式不会生效，自然无法控制内部子元素的排列方向。
另外你代码中循环生成的子元素使用了重复id（Ppicture、Name、Age），id在单页中必须唯一，建议改为class属性避免后续出现DOM选择异常。

解决方案 #

方案1：替换虚拟容器为真实DOM节点

将<ng-container>替换为普通div节点，为其设置flex布局即可：
HTML代码：

<div class="model-container">
    <div class="model" *ngFor="let model of modelService;">
        <div class="Ppicture">{{model.modelPic}}</div>
        <div class="Name">{{model.modelName}}</div>
        <div class="Age">{{model.modelAge}}</div>
    </div>
</div>

CSS代码：

.model-container {
  display: flex;
  flex-direction: row;
  /* 若元素超出一行需要自动换行，可添加下方属性 */
  /* flex-wrap: wrap; */
  gap: 10px;
}
.model {
  padding-top: 10px;
  border: 1px solid;
  height: 150px;
  width: 150px;
  text-align: center;
}

方案2：保留ng-container，为上层父节点加flex

如果你不需要额外新增一层包裹节点，直接找到<ng-container>所在的父级真实DOM元素，为该父元素添加上述.model-container的flex样式即可生效。

补充说明：你之前为.model添加display:flex只会控制单个model盒子内部的子元素排列，flex布局仅对直接子元素生效，因此不会影响多个model盒子的排列方向。

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