Flex card with two rows - html

Question

I have one card which I am using for images. I want to have two rows in my card for images. Concept behind this is, I am getting different product's images which i am showing properly in one line. On next line, i want to show all images from very first product. But i am not align it properly.
Currenlty, I am getting all the images in one row. I want to show all the images from class contain on next line.
Can someone help me with this CSS stuff? Below is my code.
HTML :
.image-card {
width: 100%;
display: flex;
overflow-x: scroll;
flex-direction: row;
}
.contain {
display: flex;
flex-direction: row;
}
.child {
display: flex;
flex-direction: row;
height: 100px;
}
.child>img {
width: 100px;
height: 100px;
}
img {
width: 100px;
height: 150px;
}
<md-card class="image-card">
<div *ngFor="let url of this.urls">
<img [src]="url" (click)="openDialog(url)">
<div class="button-row">
<a md-raised-button (click)="goToProduct(url.slice(59, 64))">
{{ url.slice(59, 66) }}
</a>
</div>
</div>
<div class="contain">
<div class="child">
<img [src]="this.secondImage">
<img [src]="this.thirdImage">
<img [src]="this.fourthImage">
<img [src]="this.logo">
<img [src]="this.brandImage">
</div>
</div>
</md-card>

Answer 1

Use flex as suggested below
.image-card {
width: 100%;
display: flex;
overflow-x: scroll;
flex-direction: column;
}
.image-card .abc {
width: 100%;
max-height: 225px;
overflow-x: auto;
margin-top: 10px;
}
.contain {
display: flex;
flex-direction: row;
}
.child {
display: flex;
flex-direction: row;
height: 100px;
}
.child>img {
width: 100px;
height: 100px;
}
img {
width: 100px;
height: 150px;
}
<md-card>
<div class="image-card">
<div *ngFor="let url of this.urls" class="abc">
<div>
<img [src]="url" (click)="openDialog(url)">
<div class="button-row">
<a md-raised-button (click)="goToProduct(url.slice(59, 64))">
{{ url.slice(59, 66) }}
</a>
</div>
</div>
<div class="contain">
<div class="child">
<img [src]="this.secondImage">
<img [src]="this.thirdImage">
<img [src]="this.fourthImage">
<img [src]="this.logo">
<img [src]="this.brandImage">
</div>
</div>
</div>
<div *ngFor="let url of this.urls" class="abc">
<div>
<img [src]="url" (click)="openDialog(url)">
<div class="button-row">
<a md-raised-button (click)="goToProduct(url.slice(59, 64))">
{{ url.slice(59, 66) }}
</a>
</div>
</div>
<div class="contain">
<div class="child">
<img [src]="this.secondImage">
<img [src]="this.thirdImage">
<img [src]="this.fourthImage">
<img [src]="this.logo">
<img [src]="this.brandImage">
</div>
</div>
</div>
<div *ngFor="let url of this.urls" class="abc">
<div>
<img [src]="url" (click)="openDialog(url)">
<div class="button-row">
<a md-raised-button (click)="goToProduct(url.slice(59, 64))">
{{ url.slice(59, 66) }}
</a>
</div>
</div>
<div class="contain">
<div class="child">
<img [src]="this.secondImage">
<img [src]="this.thirdImage">
<img [src]="this.fourthImage">
<img [src]="this.logo">
<img [src]="this.brandImage">
</div>
</div>
</div>
</div>
</md-card>

Answer 2

Wrap ngFor with div and apply class="image-card" to it
.image-card {
width: 100%;
display: flex;
overflow-x: scroll;
flex-direction: row;
}
.contain {
display: flex;
flex-direction: row;
}
.child {
display: flex;
flex-direction: row;
height: 100px;
}
.child>img {
width: 100px;
height: 100px;
}
img {
width: 100px;
height: 150px;
}
<md-card class="">
<div class="image-card">
<div *ngFor="let url of this.urls">
<img [src]="url" (click)="openDialog(url)">
<div class="button-row">
<a md-raised-button (click)="goToProduct(url.slice(59, 64))">
{{ url.slice(59, 66) }}
</a>
</div>
</div>
</div>
<div class="contain">
<div class="child">
<img [src]="this.secondImage">
<img [src]="this.thirdImage">
<img [src]="this.fourthImage">
<img [src]="this.logo">
<img [src]="this.brandImage">
</div>
</div>
</md-card>