Angular2和md-checkbox - 如何使用flexbox创建列

Question

我正在尝试用flex包装一个md-checkbox在angular2中。我将有30多个项目，并希望至少有三列。

我希望每列垂直显示。所以3列10.我做错了什么？下面我试图创建2个cols，每个col显示垂直，但复选框是水平的

这是我的html和css ......

<div  class="flex-container-fx">
            <div  *ngFor="let fx of currency_list;let i=index">

                        <div class="flex-items-default-fx">
                            <div *ngIf="i<5" formArrayName="selected_currency_list">
                                <mat-checkbox [formControlName]="i" (change)="onCurrencyChange(i)">{{fx}}</mat-checkbox>
                            </div>
                        </div>

                        <div class="flex-items-default-fx-1">
                            <div *ngIf="i>=5" formArrayName="selected_currency_list">
                                    <mat-checkbox [formControlName]="i" (change)="onCurrencyChange(i)">{{fx}}</mat-checkbox>
                            </div>
                        </div>

            </div>
        </div>

这是我的css：

.flex-container-inner-fx {
  display:flex;
  flex-direction: row;
  background-color: antiquewhite;
}


.flex-items-default-fx {

  background-color: blue;
}

.flex-items-default-fx-1 {

  background-color: pink;
}