AutoAlign Checkboxes in row using angular material design

Question

I am using angular material design for my angular application, I am getting the fields of an index of elasic search and creating them as checkboxes in my form. It is getting generated, but when it has more than 4 fields, the alignment looks clumsy.

HTML:

 <div layout="row" layout-align='left start'>                       
   <md-checkbox   ng-repeat="field in selectedFields"    layout="row"  ng-click="toggleCheck(field)"    style="text-transform:capitalize"  aria-label={{field.name}}>
   {{field.name}}
  </md-checkbox>
</div>

OUTPUT:

Plnker:

Answer 1

Just checked angular-material-layout.css and found "layout-wrap".

You need this :

 <md-content class="md-whiteframe-z2">
            <div layout="row" layout-wrap  md-scroll-y flex>
                   <md-checkbox flex='20'
                  ng-repeat="field in fields"
               layout="row"
               ng-click="toggleCheck(field)"
               style="text-transform:capitalize"
               aria-label={{field}}>
               {{field}}
                </md-checkbox>
            </div>
</md-content>

Working here : Plunk