Auto-wrap lots of items in Material

Question

In bootstrap, I would be able to do something like this:

<div class="row">
  <div class="col-md-4" ng-repeat="myData in myArray"></div>
</div>

And if I had, say, 8 items in myArray, I would get output kinda like this:

1 | 2 | 3 | 4
5 | 6 | 7 | 8

When I try to do this with material/angular, all I get is this:

... which obviously isn't wrapping.

Here's my HTML:

<md-card>
  <h3 class="text-center">Stats</h3>
  <div layout="horizontal" class="text-center">
    <div ng-repeat="stat in equipmentStatArray" flex="25">
        <span class="fa fa-fw fa-2x vertical-center {{stat.fa}}">
            <md-tooltip>{{stat.name}}</md-tooltip>
        </span>
        <span>&nbsp;</span>
        <span>{{player._statCache[stat.name]}}</span>
    </div>
  </div>
</md-card>

Is this possible with Material?

Answer 1

You can do that, or you can simply add layout-wrap property to your <div ng-repeat="stat in equipmentStatArray" flex="25"> like this:

<div ng-repeat="stat in equipmentStatArray" flex="25" layout-wrap>