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 class="container" *ngFor="let imageOrFile of imagesAndFiles">
<div class="image">
<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?
>Solution :
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 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>