Flexbox布局元素未同行排列反而换行的问题及解决方法

你把*ngFor指令用在了.container元素上，这会导致每一个imageOrFile项都会生成一个独立的flex容器，每个容器里只有一个.image子元素。哪怕你给.image设置了40%宽度，单个元素在flex容器里自然会独占一行，这就是每个元素单独占一行的核心原因。

要实现每行两个元素，必须让单个flex容器包裹所有循环生成的.image元素，调整代码如下：

修改后的gallery.html #

<div class="container">
  <div class="image" *ngFor="let imageOrFile of imagesAndFiles">
    <dispo-einsatz-dokumente-gallery-image-item
      [image]="imageOrFile"
    ></dispo-einsatz-dokumente-gallery-image-item>
  </div>
</div>

可选SCSS优化 #

如果需要更稳定的响应式两列布局，可以给flex容器添加换行属性，同时调整元素间距：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 元素超出容器宽度时自动换行 */
  gap: 10%; /* 两个元素间距+40%*2刚好填满容器宽度 */
}

.image {
  width: 40%;
  height: 200px;
}

这样设置后，容器宽度足够时每行自动排列两个元素；容器变窄时元素会自动换行，布局更健壮。

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