html - 角度のある材料設計を使用して行の自動整列チェックボックス

Question

私はAngularアプリケーションにAngular Material Designを使用しています。エラシック検索のインデックスのフィールドを取得し、フォームにチェックボックスとして作成しています。生成されていますが、フィールドが 4 つを超えると、配置がぎこちなく見えます。

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>

出力：

Plnker: