flexbox breaking line instead of printing in a row-CodePudding

I have a normal, easy flexbox layout. I try to show two elements per row. There is enough width for 2 elements. But strangely, every element gets one whole row. I don't know why. Here is my code:

gallery.html:

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

gallery.scss:

.container {
  display: flex;
  flex-direction: row;
}

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

And the child component html:

<p>{{ image.name }}</p>

This is the result:

Why is it like this? How do I get my two elements in one row?

CodePudding user response：

change your gallery.html:

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

*ngFor repeat N time div with class "container" and you have N rows

CodePudding user response：

move the for loop to the div.image element, container class element is being rendered multiple times, you want to render the container class element once with multiple image class elements

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