How to make a flexbox in a div to have 2 columns with ngFor of mat-chips/angular material2?
I am assuming that the table code you gave as an example is wrong, since you mentionned that you want 2 columns with 5 rows, which is equivalent to this. The answer below is to have a display similar to the table here
<table>
<tr><td>Fruit 1</td><td>Fruit 6</td></tr>
<tr><td>Fruit 2</td><td>Fruit 7</td></tr>
<tr><td>Fruit 3</td><td>Fruit 8</td></tr>
<tr><td>Fruit 4</td><td>Fruit 9</td></tr>
<tr><td>Fruit 5</td><td>Fruit 10</td></tr>
</table>
If you want to use flex, you need to set flow-direction
to column
and have a max-height on the container, equal to 5 times the height of a row
scss
$rowHeight: 40px;
.flexp {
display: flex;
flex-wrap:wrap;
flex-direction: column;
max-height: calc(5 * #{$rowHeight});
}
.flexc {
height: $rowHeight;
flex-grow: 1;
display: inline-block;
}
html
<mat-chip-list>
<div class="flexp">
<div class="flexc" *ngFor="let fruit of fruits">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</div>
</mat-chip-list>
Other solution not using flex
You can use the column-count property
scss
$rowHeight: 40px;
.fruitContainer {
column-count: 2;
max-height: calc(5 * #{$rowHeight});
}
.fruit {
height: $rowHeight;
}
html
<mat-chip-list>
<div class="fruitContainer">
<div class="fruit" *ngFor="let fruit of fruits">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</div>
</mat-chip-list>
Stackblitz demo
Below is the result
MatGridList
is provided for this very reason.
<mat-grid-list cols="2" rowHeight="48px">
<mat-grid-tile *ngFor="let fruit of fruits">
<div class="flexc">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</mat-grid-tile>
</mat-grid-list>
See stackblitz example.