Angular中*ngFor导致组件水平对齐失效的解决方法

你当前的问题核心是错误地将*ngFor指令应用在了flex容器上——每执行一次循环就会生成一个独立的.flexbox-container容器，每个容器内仅包含一个<app-card>，这些独立容器会垂直堆叠，自然失去了原本的水平布局效果。

解决方案 #

将*ngFor指令从flex容器移至<app-card>元素上，让所有循环生成的卡片都处于同一个flex容器内，即可恢复水平居中对齐效果。

保留原CSS代码：

.flexbox-container{
    display: flex;
    justify-content: center;
}

修改后的HTML代码：

<div class="flexbox-container">
  <app-card *ngFor="let title of titles" [title]="title"></app-card>
</div>

额外提示 #

推荐使用Angular的属性绑定语法[title]="title"传递输入属性，相比插值表达式title={{title}}，它更符合Angular最佳实践，在处理复杂数据类型时也更稳定可靠。

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