How to make a flexbox in a div to have 2 columns with ngFor of mat-chips/angular material2?

Ask A Question

Login To post a question

I have a list of fruits with 10 entries. I want to make it so that the fruit name text (next to a mat-chip) are displayed in two columns with 5 in each column. The chips I am using are here:


.flexp {
    display: flex;

.flexc {
    flex-grow: 1;
    display: inline-block;


       <div class="flexp" *ngFor="let fruit of fruits">
              <div class="flexc">

How can I do this? Right now my flexbox is going from top to bottom.

I want to make to so that it looks like a table, but without having to create the structure. If there was a way for the ngFor to be smart enough to make it display in this way… that is what I am looking for:

<td>Fruit 1</td><td>Fruit 6</td>
<td>Fruit 2</td><td>Fruit 7</td>
<td>Fruit 3</td><td>Fruit 8</td>
<td>Fruit 4</td><td>Fruit 9</td>
<td>Fruit 5</td><td>Fruit 10</td></tr>

If it is not possible, please state.

For more info please click here

Have a question or need a custom quote?